Gradient Generator

Create linear, radial and conic gradients with 2–5 colors and custom angles. Live preview, presets, random (Space), Tailwind + CSS output, PNG download. Hit Space to randomize.

or Space

Direction & shape

Angle 135°

Color stops (2)

CSS output

What is a gradient generator?

Smooth color transitions, zero images

A gradient blends two or more colors along a line, from a center, or around a point. Browsers render it as crisp resolution-independent CSS, perfect for heroes, buttons, cards and overlays with zero network requests.

This tool goes beyond 2-color basics: linear + radial + conic types, up to 5 stops with positions, 8 presets, random inspiration, Tailwind arbitrary classes, and PNG export, all local in your browser.

How to use

Pick type & colors

Linear, radial or conic. Edit each stop with picker, HEX or 0–100% slider. Add up to 5, remove down to 2.

Set direction

Angle slider + 45° presets for linear/conic, shape + position for radial. Try presets or Space for random.

Copy & ship

Copy CSS or Tailwind, download CSS+PNG, or share the URL, stops and angle persist in ?type=&angle=&stops=.

Real-life examples

Hero backgrounds: 135deg indigo→pink

Diagonal 2-color washes stay readable under white text and compress to one CSS line. Start from the Indigo Pink preset.

Buttons & CTAs: 90deg 3-stop

Sunset-style triples add depth to small elements. Keep middle stop near 50% for even blends on hover states.

Glows & spotlights: radial

Radial ellipse at top creates soft aurora behind cards. Pair with dark surfaces for contrast-safe overlays.

Progress rings: conic

Conic from-angle sweeps suit pie charts and loaders. Two stops with hard positions give segmented rings.

Tailwind shipping

Copy the arbitrary bg-[linear-gradient(...)] class straight into markup, or save the config snippet for repeated use.

Social & OG images

Download 1200×630 PNG snapshots for covers, thumbnails and placeholders without opening a design tool.

Frequently asked questions

1How do I make a CSS gradient?

Pick a type, set 2–5 colors with positions, adjust angle/center, and copy the background: line. Easiest path: choose a preset, tweak one stop, hit Copy CSS.

2Linear vs radial vs conic: when to use each?

Linear for heroes/buttons along an angle. Radial for glows radiating from a point (spotlights, aurora). Conic for sweeps around a center like pie charts, loaders and color wheels.

3What is the difference between “to right” and “90deg”?

Keywords go corner-to-corner based on box shape; angles are exact compass directions (0° = to top, 90° = to right, clockwise). We output degrees so the gradient looks identical at any aspect ratio.

4How do stops and positions work? Can I make stripes?

Each stop is color + 0–100%. Space them evenly for smooth blends; stack two stops at the same position for a hard stripe edge. Add up to 5, remove down to 2.

5Do I get Tailwind, PNG and share links?

Yes, every gradient shows CSS plus Tailwind arbitrary bg-[...]. Download popup offers CSS, Tailwind or 1200×630 PNG. The URL stores type, angle and stops for sharing.

6Will it work in all browsers? Is my work uploaded?

Linear/radial/conic are baseline since 2015 across modern browsers. Everything runs locally, no upload, no signup, free forever.

Palette Generator

Random harmonies + image mode

Color Converter

HEX RGB HSL HSV CMYK LAB

Contrast Checker

WCAG text readability grades

Image Palette Generator

Extract palette from any photo