CSS Gradient Generator
Color
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
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.