CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color stops
- 0%
- 100%
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
How to use
- Pick linear or radial.
- Adjust the angle (linear) or shape (radial).
- Edit the color stops and drag the position sliders.
- Copy the CSS rule or the Tailwind class.
About this tool
ShowHide
Design linear or radial CSS gradients visually: pick the type, set the angle or shape, add as many colour stops as you like, drag their positions, and watch a live preview update as you go. Stops are sorted by position before the rule is written, so you can add them in any order and still get valid CSS. Linear gradients use the CSS angle convention, where 0deg points up and the angle turns clockwise — not the mathematical one — and radial gradients can be a circle or an ellipse. Copy the result as a plain CSS rule, or as a Tailwind arbitrary-value class in which the spaces are replaced by underscores so the class name survives the parser.
Frequently asked questions
Why Tailwind arbitrary values?
Tailwind's bg-[…] arbitrary value class lets you drop a custom CSS gradient straight into a Tailwind project without writing a separate CSS file.
How many color stops can I add?
As many as you want — three to five usually looks best, but the tool supports any number.
Can I save a gradient?
Your last design auto-saves to your browser's local storage and reloads next time you open the tool.
Why does the Tailwind class use underscores?
Tailwind treats whitespace as a class separator, so arbitrary values use underscores in place of spaces.
Does the order I add stops in matter?
No. Stops are sorted by position before the rule is written, so you can add one at 80% and then another at 20% and still get valid CSS. Position is what decides where a colour sits; the row order in the editor is only for your convenience.
Which way does 0deg point?
Up. CSS measures the angle from the direction the gradient runs towards, starting at the top and turning clockwise, so 90deg runs left to right. The mathematical convention starts at the right and turns anticlockwise instead, which is why a gradient copied from a design tool sometimes arrives rotated.
Guides on this topic
Related tools
Conic Gradient Generator
Visual builder for CSS conic-gradient() — rotate angle, center position, color stops, shape preview.
Color & CSS
Color Token Exporter
Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android colors.xml.
Color & CSS
Color Name Finder
Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.
Color & CSS
CSS Blend Modes Simulator
Apply all 16 W3C blend modes to two colors and see the computed hex for each, with a copyable mix-blend-mode CSS snippet per mode.
Color & CSS
Color Mixer
Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.
Color & CSS
Color Lerp / Gradient Steps
Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.
Color & CSS
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color & CSS