CSS Gradient Generator
Design Tools
Design CSS gradients visually — linear, radial, or conic — with draggable color stops, an angle slider, and instant CSS or Tailwind output.
Runs entirely in your browserAbout CSS Gradient Generator
CSS gradients are one of the highest-impact, lowest-cost ways to give a page personality without shipping image bytes. They render natively in the browser, scale infinitely, and cost almost nothing in performance terms. The Gradient Generator lets you compose them visually instead of hand-tuning angles and color stops in code.
You can switch between linear (most common — gradient runs in a direction), radial (emanates from a center point, great for spotlight effects), and conic (sweeps around an angle, useful for pie-chart-style or angular highlights). Add up to 8 color stops, each with its own position. Toggle repeating mode for striped or banded effects. The output is plain CSS suitable for any framework, plus a Tailwind-compatible arbitrary-value class for utility-first codebases. Every change updates the preview at 60 fps so you can iterate visually.
How to use
- 1
Pick a gradient type
Choose Linear, Radial, or Conic from the Type dropdown. Linear is the default and most common.
- 2
Adjust the angle (linear/conic)
Drag the Angle slider to set the gradient direction. Radial gradients ignore angle and emanate from the center.
- 3
Edit color stops
Click a stop in the list to edit it. Use the color picker to change the hue and the Position slider to set where it falls (0–100%). Add stops with the + button (up to 8 total).
- 4
Toggle repeating mode
Check Repeating to produce striped or banded gradients that tile the pattern across the element.
- 5
Copy the output
Use the Copy button on the CSS panel to grab `background: linear-gradient(...)`, or the Tailwind panel for an arbitrary-value class.
Examples
Sky-to-purple linear gradient
Two stops at 0% and 100%, 135° angle.
Output
background: linear-gradient(135deg, #0ea5e9 0%, #a855f7 100%);Repeating banded gradient
Same colors, but repeating mode produces stripes.
Output
background: repeating-linear-gradient(45deg, #0ea5e9 0%, #0ea5e9 10%, #a855f7 10%, #a855f7 20%);Frequently asked questions
What's the difference between linear, radial, and conic?+
Linear runs from one edge to another. Radial expands from a center point outward. Conic rotates around a center point. Pick based on the visual effect — linear for backdrops, radial for spotlights, conic for pie-chart-style angular patterns.
Can I use this output in Tailwind?+
Yes — the Tailwind output panel emits an arbitrary-value class like `bg-[linear-gradient(...)]`. Underscores are used in place of spaces, which is the Tailwind convention.
How many color stops can I have?+
Up to 8 in the UI. CSS allows more in principle, but most gradients look best with 2–4 stops.
Does the preview match what I'll see in production?+
Yes — the preview uses the exact CSS the generator outputs. What you see is what you'll get when you paste the snippet into your project.
Why use a repeating gradient?+
Repeating gradients let you create striped backgrounds (e.g. construction-tape diagonals), banded patterns, or layered visual textures without an image.
Related tools
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
CSS Formatter
Format and organize CSS automatically with configurable brace and indent styles.