Gradient Generator

Build CSS linear and radial gradients visually. Drag stops along the gradient bar, click any stop to recolor, set angle (linear) or position (radial). Live preview, one-click CSS copy. Output works in any modern browser (CSS Backgrounds & Borders Level 3).

Why gradients are back

Flat design dominated 2015-2020; gradients returned around 2021 (Stripe, Linear, Apple) and have stayed. The right gradient adds depth without nostalgia for the skeuomorphism era. The wrong gradient looks like 2007 GeoCities. The line is technique:

• Subtle hue shifts, not rainbow ramps
• OKLCH interpolation, not sRGB (sRGB blends through gray)
• Two to three stops, not seven
• Soft angles (135°, 45°), not 90° unless deliberate

The generator gives you live feedback so you can iterate without leaving the browser tab.

What the tool produces

• CSS — the full property value, ready for background: or background-image:
• Tailwind — the arbitrary-value form, ready for bg-[...]
• Image export — PNG render at any size, for use cases CSS cannot reach (email)

Common workflows

Design a hero section background. Pick brand color, add a tinted second stop, set angle to 135°. Match the brand without flattening the whole canvas.

Build a colorful button. Two-stop gradient for default, slightly shifted on hover. Smooth UX feel without animation libraries.

Mesh-style backgrounds. Layer multiple radial gradients with background: radial-gradient(...), radial-gradient(...). Modern dashboards use this pattern heavily.

Generate a placeholder image. Export at 1200×630 for an OG image when you have nothing else.

Why OKLCH interpolation

linear-gradient(red, blue) in sRGB transitions through muddy purple/gray. The same gradient in OKLCH transitions through smooth violet — perceptually uniform. Browsers added it because designers asked. Use it when the gradient covers a wide hue range; sRGB is fine for closely related colors.

Last updated: 2025-01-15