CSS Gradient Generator
Pick a gradient type, adjust the angle and color stops, and copy production-ready CSS or a Tailwind arbitrary value. The preview updates as you edit.
Free Runs locally No signup
Presets
Color stops
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
Colors are written as hex values; the preview updates while you edit.
How to use it
1
Choose a type
Switch between linear, radial and conic gradients and set the angle.
2
Adjust the stops
Pick colors, move their positions and add up to five stops.
3
Copy the code
Copy the CSS rule or the Tailwind arbitrary value and paste it into your project.
Why use this tool
Three gradient types
Linear, radial and conic gradients share one editor and one live preview.
Tailwind output
Get a ready-to-paste bg-[…] class alongside the plain CSS value.
Presets and random
Start from a preset or roll a random palette when you need inspiration.
Frequently asked questions
Which browsers support conic gradients?
All current versions of Chrome, Edge, Firefox and Safari support conic-gradient. Older browsers fall back to no background, so keep a solid color behind it.
How do I use the Tailwind value?
Paste the generated bg-[…] class into your HTML or JSX. Spaces are replaced with underscores, which is how Tailwind escapes arbitrary values.
Can I use transparent colors?
Yes, the color picker writes eight-digit hex values with an alpha channel, which CSS and Tailwind both accept.
Why is the angle disabled for radial gradients?
A radial gradient spreads from a center point, so there is no direction to rotate. The angle still applies to linear and conic gradients.
Is anything uploaded?
No. The gradient is generated in your browser and never sent to a server.
Related tools
Color & Design Color Converter Convert colors between HEX, RGB, HSL and HSV, pick from a color wheel, and copy ready-to-use values for CSS and design tools. Color & Design Contrast Checker Check the contrast ratio between text and background colors and see whether they pass WCAG AA and AAA for normal and large text. Image Tools Image Format Converter Convert PNG, JPG and WebP images in your browser. Choose the output format and quality, keep transparency where supported, and download instantly. Developer Tools Base64 Encoder & Decoder Encode text to Base64 or decode Base64 back to text, with full UTF-8 and URL-safe support. Runs locally in your browser — no upload, no signup. Text Tools Case Converter Convert text between UPPER CASE, lower case, Title Case, sentence case, camelCase, PascalCase, snake_case and kebab-case instantly. Converters Date Calculator Calculate the difference between two dates, add or subtract days, months and years, and work out an exact age. Runs in your browser.
Last updated: