CSS Gradient Generator
Design beautiful linear or radial CSS gradients visually: pick the type, set the angle or shape, add as many color stops as you like, and see a live preview. Copy the result as a plain CSS rule or as a Tailwind arbitrary-value class.
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.
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.
Related tools
Conic Gradient Generator
Visual builder for CSS `conic-gradient()` — rotate angle, center position, color stops, shape preview. Useful for pie charts, ring charts, checkered patterns, color wheels.
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`. Live preview swatches.
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.
CSS Blend Modes Simulator
Apply all 16 W3C compositing blend modes (multiply, screen, overlay, soft-light, hue, color, luminosity…) to two colors and see the computed hex result for each, with a copyable mix-blend-mode CSS snippet per mode.
Color Mixer
Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.
Color Lerp / Gradient Steps
Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.