Free · Private · No signup
CSS Gradient Generator
Linear, radial, conic, and mesh — live preview, copy CSS or Tailwind, export PNG. Nothing leaves this tab.
Presets
Tile the stops across the box
Opacity 100%
Position 52%
Copy & share
background-image
background-image: linear-gradient(135deg, #2d1b4e 0%, #e07a5f 52%, #f2cc8f 100%);.gradient { }
.gradient {
background-image: linear-gradient(135deg, #2d1b4e 0%, #e07a5f 52%, #f2cc8f 100%);
}Tailwind
bg-[linear-gradient(135deg,_#2d1b4e_0%,_#e07a5f_52%,_#f2cc8f_100%)]Gradients you can ship, without an image host
Most gradient toys give you a tiny swatch and two hex fields. This studio is built for backgrounds you will actually paste into a stylesheet: full-bleed preview, stops on a bar, mesh as stacked radials, and a PNG when you need a fallback. Pair it with the SVG Shape Generator for a divider on top.
A large canvas, not a postage-stamp swatch. Click the bar to add stops, drag to place them, edit hex and opacity.
Angle and position pads, optional repeating, and a CSS-only mesh of stacked radials — no WebGL, no account.
background-image, a ready .gradient rule, and a Tailwind arbitrary value when it fits. Toast on copy.
Export 1920×1080 or square. The hash in the address bar restores the same config on any device.
How to make a CSS gradient
- 1
Pick a type or a preset
Start from Dusk, Paper, Aurora, or Studio mesh — or switch Linear / Radial / Conic / Mesh and tune angle or position.
- 2
Place stops on the bar
Click to add (2–8 colors), drag handles, set hex and opacity. Reverse, swap ends, or roll a tasteful random palette.
- 3
Copy CSS or export PNG
Copy the property, a class snippet, or Tailwind. Download a 1920×1080 or square PNG painted in the browser.
- 4
Keep the URL
The hash updates as you edit. Bookmark or share the link — the gradient comes back without a server.
Frequently asked questions
Does this CSS gradient generator upload my colors or design?
No. Stops, mesh layers, PNG export, and copy all run in your browser. Nothing is sent to a server, and there is no account.
What is the difference between linear, radial, conic, and mesh?
Linear blends along a line (angle). Radial blends from a point outward. Conic sweeps around a point like a color wheel. Mesh stacks a few radial highlights on a base color — CSS only, no WebGL — useful for soft, editorial backgrounds.
How do I add or remove color stops?
Click the gradient bar to add a stop (up to eight). Drag a handle to move it. Select a stop and press Delete, or use the trash control. You need at least two stops. Mesh mode uses draggable blobs on the preview instead of the bar.
How do I copy CSS or Tailwind?
Copy the background-image line, a full .gradient { } rule, or a Tailwind arbitrary value (bg-[…]) when the string is short enough. Mesh output includes background-color plus stacked radials. A toast confirms the copy.
Can I export a PNG of the gradient?
Yes. Export 1920×1080 (landscape) or 1080×1080 (square) from the preview. The PNG is painted on a canvas in this tab — useful for slides, posters, or a fallback image.
What does the share hash in the URL mean?
The fragment (for example #linear/135/n/100/…) encodes type, angle or position, and stops. Bookmark or send the full URL; opening it restores the same gradient. Nothing is stored on a server.
What is repeating, and when should I use it?
Repeating linear, radial, or conic tiles the stop list using the cycle length (percent). Use a cycle under 100% so the pattern is visible — stripes, rings, or a conic burst — instead of a single blend across the whole box.
Is the CSS Gradient Generator free?
Yes. No signup, no watermark, unlimited use in the browser. Processing is limited only by your device.