CSS Gradient Generator

Design linear, radial, and conic CSS gradients visually. Add color stops, adjust positions, and copy the ready-to-use CSS code.

Instant result Runs in browser
CSS Gradient Generator
135°

Presets

CSS Gradient Tips

Gradients work on any CSS property that accepts images: background, background-image, border-image, mask, and more. Use comma-separated gradients to layer them: background: linear-gradient(...), linear-gradient(...);

How to use?

  1. 1
    Choose Gradient TypeSelect Linear, Radial, or Conic. Adjust the angle for linear or conic gradients.
  2. 2
    Set Color StopsPick colors and positions for each stop. Add more stops for complex gradients.
  3. 3
    Copy the CSSClick Copy CSS to get the ready-to-paste code, or copy just the background value.

FAQ

What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated purely by the browser — no image file needed. Linear gradients go in a straight line, radial gradients radiate from a center point, and conic gradients sweep around a center like a color wheel.
How many color stops can I add?
This tool supports up to 8 color stops. CSS itself has no official limit, but browsers handle dozens of stops without issue.
Is the generated CSS compatible with all browsers?
Yes. The output uses the unprefixed standard syntax supported by all modern browsers (Chrome, Firefox, Safari, Edge). Internet Explorer 9 is the only major browser that requires the older -ms- prefix, which this tool omits.

What Is a CSS Gradient?

A CSS gradient is a smooth color transition defined in code, requiring no image files. Gradients are rendered natively by the browser at any resolution, making them perfect for backgrounds, buttons, borders, and overlays.

Linear vs Radial vs Conic

Linear gradients flow in a straight line at a given angle. Radial gradients radiate outward from a center point in an ellipse or circle. Conic gradients sweep around a center point like a color wheel — great for pie charts and dial effects.

Color Stops

Color stops define where each color starts and ends along the gradient. You can place them at any position (0%–100%). Without explicit positions the browser distributes them evenly.

Performance

CSS gradients are GPU-accelerated in all modern browsers. They are significantly faster to render than equivalent raster images and scale perfectly at any screen resolution or zoom level.

Comments