Your data is never sent to a server or stored anywhere. All processing happens in your browser.

CSS Gradient Generator

Gradient Type
Angle
135deg
Color Stops
0%
100%
Preview
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

How to Use

  1. Select a gradient type: linear or radial.
  2. For linear gradients, adjust the angle to set the direction.
  3. Add, remove, or modify color stops to customize the gradient.
  4. Each stop has a color picker and a position (0-100%).
  5. Copy the generated CSS with the copy button.

CSS Gradients

CSS gradients let you display smooth transitions between two or more colors. Linear gradients go in a straight line at a specified angle, while radial gradients radiate from a center point. They are commonly used for backgrounds, buttons, overlays, and decorative effects.

Gradient Types

  • Linear gradient: Colors transition along a straight line defined by an angle (e.g., 0deg = bottom to top, 90deg = left to right, 135deg = top-left to bottom-right).
  • Radial gradient: Colors transition outward from a center point in a circular or elliptical shape.

Privacy

All processing happens in your browser. No data is sent to any server.