🌈

CSS Gradient Generator

Build linear and radial CSS gradients visually. Add color stops, adjust positions, set the angle, and copy the ready-to-use CSS in one click.

Generator Tools Runs locally No data sent
CSS gradientlinear gradientradial gradientcolor stops
Gradient Type
Angle
Color Stops
Preview
CSS Output
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

What is CSS Gradient Generator?

CSS Gradient Generator is a visual tool for building CSS linear and radial gradients. You add color stops, set their positions on a 0—00% scale, choose an angle for linear gradients, and see the result live. The final CSS property is ready to paste into any stylesheet.

How to Use CSS Gradient Generator

  1. Choose Linear or Radial gradient type.
  2. For linear gradients, set the angle using the slider.
  3. Edit the default color stops by clicking the color pickers and adjusting positions.
  4. Add more color stops with the "Add color stop" button if needed.
  5. Click "Copy CSS" to copy the gradient property to your clipboard.

Related Tools

🎨
Image Palette Extractor
Extract a compact palette of dominant HEX colors from an image
 ☀️
Image Brightness Contrast
Adjust photo brightness and contrast with instant preview
 🌓
Duotone Image
Map image shadows and highlights to two custom colors
CSS Gradient Syntax ▾
Example
Input Linear, 135°, stop 1: #7c6af7 at 0%, stop 2: #06b6d4 at 100%
Output background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Common Use Cases
  • Generate background gradients for landing pages and UI components
  • Create gradient overlays for hero sections
  • Build color-stop patterns for charts or dividers
  • Prototype gradient ideas before transferring to a design tool
Frequently Asked Questions
What gradient types are supported?

Linear gradients with a custom angle (0—60°) and radial gradients (circle shape) are both supported.

Can I add more than two color stops?

Yes. Click "Add color stop" to add as many stops as you need. Each stop has an independent color and position.

How do I control the direction of a linear gradient?

Use the Angle slider. 0° is top to bottom, 90° is left to right, and 135° runs diagonally.

Is the output cross-browser compatible?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.