How do I create a CSS gradient?

Pick two or three colors, choose linear or radial, and adjust the angle with the slider. The live preview updates instantly and the ready-to-use CSS appears below for you to copy.

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at an angle you choose. A radial gradient blends outward from a center point in a circle. Both are supported here with a live preview.

Can I add more than two colors?

Yes — enable the third color to create a multi-stop gradient blending through three colors, giving richer, more vibrant backgrounds.

Is the generated CSS ready to use?

Yes — the output is a standard background property you can paste directly into your stylesheet or inline style. It works in all modern browsers.

Yes — completely free, no signup, and it runs entirely in your browser.

CSS Gradient Generator

Remove Ads

Type

Angle: 90°

Color 1

Color 2

Add third color

Color 3

Preview

CSS

Remove Ads

CSS Gradient Generator — Design Beautiful Gradients Visually

Hand-writing gradient CSS means guessing hex codes and angles, then reloading to see if it worked. This free visual generator flips that around: pick your colors, drag the angle, and watch the gradient update live — then copy production-ready CSS. Linear or radial, two or three colors, all in your browser.

Linear vs Radial

Linear — colors blend along a straight line at your chosen angle (0-360°). Perfect for hero sections, buttons and backgrounds.
Radial — colors radiate outward from the center in a circle. Great for spotlights, glows and soft backdrops.

Two or Three Colors

A simple two-color gradient is clean and modern. Add a third color stop and you get the richer, more vibrant blends popular in modern UI design — the kind of gradient that makes a landing page feel current. The live preview makes it easy to find a combination that actually looks good rather than guessing in code.

Why Gradients Are Back

Flat design ruled for years, but gradients returned as a way to add depth, energy and brand personality without heavy images. A well-chosen gradient background loads instantly (it's just CSS, no image file), scales to any screen, and gives a page a polished, intentional feel. This tool helps you find one fast.

Free, Instant, Copy-Ready

No signup, nothing to install — design your gradient and copy the CSS in seconds. Pair it with our Box Shadow Generator, Border Radius Generator and Color Palette Generator to build a complete, cohesive design system.