CSS Gradient Generator

How to create a CSS gradient

1. Choose a gradient type: Linear, Radial, or Conic.
2. Select the colors by clicking each color swatch.
3. Adjust the color-stop positions for each color.
4. Adjust the direction or angle where the type supports it (linear and conic).
5. Preview the result and copy the CSS from the output panel.

Linear, radial, or conic?

CSS gradient examples

Labeled reference examples. They are static previews, not loaded from the editor.

background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);

background-image: radial-gradient(circle, #0EA5E9 0%, #1E293B 100%);

background-image: conic-gradient(from 0deg, #6366F1 0%, #EC4899 50%, #6366F1 100%);

Use the gradient in your CSS

Apply the selector to the intended element. The background-color line is a solid fallback shown while the gradient loads or in browsers that do not render it.

.gradient-background {
  background-color: #6366F1;
  background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}

Copying the complete declaration includes the property name. Copying only the gradient value (for example linear-gradient(...)) lets you place it inside any existing background-image rule.