Tools · CSS · CSS gradient generator
CSS gradient generator
Build a linear, radial, or conic CSS gradient and copy the code.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
How it works
Pick linear, radial, or conic, and set the angle or position.
Add or remove color stops (2 to 8 of them), then use the sliders to set each one's position and opacity.
Copy the generated CSS.
Frequently asked questions
Linear, radial, and conic, each with as many as 8 color stops.
Yes, the Copy button puts the full gradient string on your clipboard, ready to paste.
Yes, where your browser supports the oklch() CSS function - it's detected automatically and only offered when it will actually render.
No. There's no file to upload here at all - the gradient is generated and rendered entirely in your browser.
Guides
A closer look at specific problems this tool solves.
Why Hand-Writing a CSS Gradient Rarely Looks Like What You Pictured
linear-gradient(135deg, #ff7a59, #ffd166) tells you nothing about what it looks like until it renders. Here's why gradient syntax is genuinely hard to picture in your head, and what actually helps.
Read the guideHow to Build a Radial Gradient in CSS Without Guessing Positions
Radial gradients spread color out from a point instead of across a line - useful for spotlight effects, glows, and vignettes. Here's how to build one and actually control where it centers.
Read the guideWhat a CSS Gradient Fallback Color Actually Does (and Why It's There)
Every copied gradient comes with a plain background: #hex; line above the gradient itself. Here's what it's actually protecting against, and why it's still worth keeping even on a modern site.
Read the guide
Comments