01
Choose the geometry first
Linear uses an angle, radial uses a circle or ellipse and a center, and conic uses a starting angle around a center. Switching type preserves the same color stops.
HTML / CSS tools
CSS gradient generatorwith live preview
Adjust colors, stops, angle, or center; the preview and copyable CSS update together.
CSS gradient generator
Color stops
Stop 1
Stop 2
CSS declaration
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Colors and CSS stay in this browser tab; nothing is uploaded.
Gradient options
CSS is ready to copy.
A CSS gradient generator helps when a design needs more than two preset colors: you can place each stop precisely and see how a hard edge or soft transition will render before touching your stylesheet.
Use this CSS gradient generator for a hero background, button, card, or conic color wheel. The same stops stay in place when you switch geometry, so comparing alternatives takes seconds.
Why use this CSS gradient generator
Compare geometry and edit the actual stops instead of guessing from a code sample.
One palette, three geometries
The CSS gradient generator keeps your colors and percentages while you switch between linear, radial, and conic previews. The angle or center controls appear only where they apply.
See each stop before copying
Move a handle or enter an exact position and the CSS gradient generator redraws both preview and declaration. Invalid color text leaves the previous CSS marked stale, so you cannot copy it by mistake.
Three details that make the CSS predictable
02
Place stops precisely
Drag a handle or enter a percentage. Two stops at the same position create a sharp edge; the CSS output sorts stops by position while keeping tied colors in their edit order.
03
Check freshness before copying
Auto generation is on by default. Turn it off to edit several values before generating with Ctrl/Cmd+Enter; while a result is stale, Copy stays disabled.
Control the shape, stops, and CSS output
Linear, radial, and conic
Make a directional fade, center-out glow, or circular sweep without changing the color stop list.
Two to eight editable stops
Pick a six-digit HEX color, set opacity and percentage, and drag each handle for a fast visual adjustment.
One standard declaration
Copy a background-image declaration that matches the live preview; transparent stops become rgba values.
What the editor accepts and leaves out
- At least two, at most eight stops
- The last two stops cannot be deleted. Adding stops stops at eight, and deleting one requires a preview, confirmation, and offers one undo.
- Six-digit HEX input only
- Enter #RRGGBB plus an opacity percentage. This tool does not convert HSL or named colors; invalid HEX or out-of-range numbers disable copying until corrected.
- One gradient layer
- The CSS gradient generator outputs one standard background-image declaration. It does not import images or CSS, layer multiple gradients, or generate Tailwind, PNG, and legacy browser prefixes.
- Preview is not a contrast test
- A gradient may look good yet leave text unreadable at one end. Check text contrast separately against the actual background.
CSS gradient generator FAQ
How do I add color stops to a CSS gradient?
Click Add stop in the CSS gradient generator. It inserts a color halfway through the largest gap; then drag its handle or edit its percentage. You can keep two to eight stops.
What is the difference between linear, radial, and conic gradients?
Linear follows an angle, radial spreads from a center, and conic rotates around a center. This CSS gradient generator lets you compare the same palette in all three types.
Why does my gradient angle point the wrong way?
In CSS, 0deg points up and 90deg points right. The radial mode has no direction angle; conic uses a separate starting angle.
Can I put a CSS gradient on text?
Yes, after copying the CSS you can apply background-clip: text and make the text fill transparent. This editor previews a background block, not text clipping.
Can I use the generated CSS in my project?
Yes. Paste the copied background-image declaration into a style rule. The output uses standard CSS gradient functions and needs no image file.
Found a gradient edge case?
Try the CSS gradient generator
Return to the color stops, adjust the shape, and copy the declaration when the preview matches your design.