How to use
- Under Type, choose Linear, Radial or Conic.
- Set Angle for Linear or Conic; for Radial, choose Circle or Ellipse under Shape.
- In Color stops, pick your colors or enter hex codes.
- Drag the stop markers to adjust where each color starts.
- Click Copy CSS to copy the background declaration, or Copy value for just the gradient function.
Examples
Three-color banner background
Input
Linear, 90deg · #2563EB 0% · #7C3AED 50% · #DB2777 100%
Output
background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #DB2777 100%);
Radial glow for a hero background
Input
Radial, ellipse at top left · #38BDF8 0% · #1E3A8A 100%
Output
background: radial-gradient(ellipse at top left, #38BDF8 0%, #1E3A8A 100%);
Repeating diagonal stripes
Input
Linear, 45deg, Repeating · #F8FAFC 0% · #F8FAFC 10% · #CBD5E1 10% · #CBD5E1 20%
Output
background: repeating-linear-gradient(45deg, #F8FAFC 0%, #F8FAFC 10%, #CBD5E1 10%, #CBD5E1 20%);
Tips
- Pick exact colors and check contrast with HTML Color Codes.
- Try the gradient in a page with the HTML Editor.
FAQ
How do I make a CSS gradient fade to transparent?
Set the final color stop's Opacity to 0%. The generator writes that stop as rgba() with zero alpha, and the checkerboard preview shows the transparency.
Why does my repeating gradient look the same?
Repeating has no visible effect when the last color stop is at 100%. Move that stop lower, for example to 25%.
Can I enter RGB values or color names?
Use hex codes or the color picker; rgb(), hsl() and color names are not accepted. Hex input supports 3, 4, 6 or 8 digits, with or without #.
How many colors can I use in a gradient?
You can use 2–8 color stops. Click + Add color stop to add another; the button is disabled at eight.
Is my gradient saved or uploaded?
Your gradient is built in your browser, and its state is saved in localStorage for your next visit. Reset deletes the saved state; analytics events contain no colors or CSS.