CSS Gradient Generator

Free tool No sign-up

Gradient Type

Angle

135°

Color Stops

0%

100%

Presets

Live preview

Generated CSS

background: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);

About this generator

Build production-ready CSS gradients visually — linear, radial, and conic — adjust stops, angles, and colors with a live preview, then copy the output. Every gradient is rendered with native CSS, so what you preview is exactly what ships: no image assets, no requests, no resolution limits, no DPI banding on Retina displays.

CSS gradients scale to any size, animate cheaply via background-position, and re-theme in a single CSS custom property update — which makes them ideal for dark-mode swaps, brand recolors, and hero sections that need to feel custom without a designer round-trip. Add alpha (rgba, hsla, or #rrggbbaa) to color stops for glass overlays, fade effects, and subtle tints over photography.

Permalink: every adjustment you make is automatically encoded into the URL hash, so you can bookmark a tuned gradient or send it to a teammate with a single share link.

?

How to use

01

Choose a gradient type

Pick Linear for directional fades, Radial for circular bursts, or Conic for pie-chart style sweeps.

02

Set your color stops

Click any color swatch to open the picker. Drag the slider to reposition a stop along the gradient.

03

Add more stops

Click "+ Add color stop" to insert additional colors for multi-tone gradients.

04

Adjust the angle

Use the Angle slider to rotate linear and conic gradients from 0° to 360°.

05

Set radial options

For radial gradients, choose Ellipse or Circle shape and set the center position.

06

Copy the CSS

Hit "Copy CSS" to grab the full background declaration and paste it into your stylesheet.

A

Syntax parameters

Parameter	Applies to	Description
`angle`	linear, conic	Direction of the gradient — e.g. 135deg, to right, to bottom left.
`shape`	radial	ellipse (default) or circle.
`position`	radial	Center point — e.g. at center, at top right.
`color stop`	all	A color followed by an optional position — e.g. #7c3aed 0%, #06b6d4 100%. Accepts any CSS color form including alpha: rgba(124,58,237,0.6), hsla(265,80%,55%,0.4), or #7c3aed99.
`alpha`	all	Stops with transparency unlock glass effects, fade overlays, and tints over images. The generator emits the format you pick in the color picker; output supports rgba / hsla / hex8.
`hint`	all	A bare percentage between stops that shifts the midpoint of the transition.
`repeating-*`	linear, radial	Pick "Repeating linear" or "Repeating radial" in the Gradient Type row to tile the gradient outward. The stops' final position % defines one band of the repeat — set it low (e.g. 20%) for tight stripes, high (e.g. 80%) for wide bands.

</>

CSS syntax examples

Linear

background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

Radial

background: radial-gradient(ellipse at center, #7c3aed 0%, #0a0a0a 70%);

Conic

background: conic-gradient(from 90deg, #7c3aed, #ff6c8a, #06b6d4, #7c3aed);

Multi-stop

background: linear-gradient(
  135deg,
  #7c3aed 0%,
  #a855f7 40%,
  #06b6d4 100%
);

✦

Pro tips

01

Gradient text via background-clip

Apply a gradient to text by setting it on the element's background, then `-webkit-background-clip: text` + `color: transparent`. Three-line headline hero treatment, no SVG required.

02

Animate background-position on an oversized gradient

Make a `linear-gradient` ~300% wider than its container, then animate `background-position` from 0% to 100% with `@keyframes`. Cheap GPU-accelerated motion, no JS, no jank.

03

Fix the "gray zone" with a midpoint stop

Gradients between complementary colors (red ↔ green, blue ↔ orange) pass through muddy gray. Adding a third stop with a vibrant midpoint color avoids the dead zone and keeps the gradient feeling alive.

04

Use transparent for cross-browser fades

Browsers interpolate `rgba(0,0,0,0)` differently from `transparent` in some legacy versions. Prefer `transparent` for the fully-clear stop; use `rgba(yourColor, 0)` (with the SAME color as the other stop) if you need to fade INTO a specific tone without grayish interpolation.

05

Re-theme via a single CSS custom property

Lift the two color stops into `--grad-from` and `--grad-to` on `:root`. Dark mode, brand recolors, and seasonal swaps become a one-line override instead of editing 12 different background rules.

06

Add alpha for glass overlays

A `linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0))` over a photo gives you a readable text-over-image treatment without a separate dimming layer. Pair with `backdrop-filter: blur(...)` for the full liquid-glass effect.

≋

Gradient types

linear-gradient()

Transitions colors along a straight line at any angle.

background: linear-gradient(135deg, #7c3aed, #06b6d4);

radial-gradient()

Radiates colors outward from a center point.

background: radial-gradient(circle at center, #7c3aed, #0a0a0a);

conic-gradient()

Sweeps colors around a center like a color wheel.

background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #7c3aed);

✓

Browser support

linear-gradient() and radial-gradient() are supported in all modern browsers. conic-gradient() requires slightly newer versions — check the table below.

Browser	linear-gradient	radial-gradient	conic-gradient
Chrome	v26+	v26+	v69+
Firefox	v16+	v16+	v83+
Safari	v7+	v7+	v12.1+
Edge	v12+	v12+	v79+

See it used in real designs

Browse hand-coded collections that put this tool to work.

Layouts30 examples

30 CSS Hero Sections

Components12 examples

12 CSS Skeleton Loaders

Layouts21 examples

21 CSS Pricing Sections