Design & color · Css
CSS Gradient Generator
Generate CSS linear or radial gradient code with up to three colour stops. Copy-ready CSS. Free online gradient maker.
#6366f1
#a855f7
#ec4899
Enter values above to see the result.
How it works
Generates CSS gradient code (linear or radial) from two or three colour stops. Copy the output directly into your stylesheet.
Step by step
- 1Choose linear or radial gradient type.
- 2For linear gradients, select the direction.
- 3Pick a start colour, an optional middle colour, and an end colour.
- 4Copy the generated CSS property value or the full background shorthand.
Examples
Purple to pink linear gradient
A three-stop gradient going left to right from indigo through purple to pink.
Inputs
- type:
- linear
- direction:
- to right
- color1:
- #6366f1
- color2:
- #a855f7
- color3:
- #ec4899
Result
- css:
- linear-gradient(to right, #6366f1, #a855f7, #ec4899)
Note: Use browser DevTools to preview the gradient on any element.
Frequently asked questions
How do I apply the gradient as a background?▾
Use the 'background' shorthand from the output, e.g. background: linear-gradient(to right, #6366f1, #ec4899); in your CSS. Apply it to any element.