CSS Gradient Generator
Create a CSS gradient visually, then copy valid CSS. Choose linear, radial, or conic; edit colors, positions, and the angle where it applies.
Gradient settings
Color stops
CSS output
background: linear-gradient(90deg, #7C41E1 0%, #3B82F6 100%);How to use it
- Choose a linear, radial, or conic gradient.
- Edit stop colors and positions; add up to eight stops.
- Adjust the angle for linear or conic gradients, then copy the CSS.
Practical uses
- Create a hero background or button treatment.
- Explore how color-stop positions change the blend.
- Copy a reusable gradient into a stylesheet.
Good to know: CSS gradient rendering can vary slightly between browsers and displays. Radial gradients are centered circles; the angle control applies only to linear and conic modes.
Frequently asked questions
What is a conic gradient?
It blends colors around a center point, like a color wheel. Its angle rotates the starting position.
Can I make a hard edge?
Yes. Give two adjacent stops the same position to create a sharp transition.
Explore more color tools
Continue your workflow with another focused tool.
Image Color Picker
Pick an exact pixel color from an image and copy HEX, RGB, or HSL.
Color Palette Generator From Image
Extract, edit, preview, and export dominant colors from a photo.
Color Contrast Checker
Check WCAG text contrast and find a nearby passing foreground.
HEX to RGB Converter
Convert HEX and RGB both ways, including optional alpha.