iziznkit

CSS gradient generator

Free · no sign-up

Build a linear or radial gradient and copy the CSS.

#7c3aed
#4faa82
background: linear-gradient(90deg, #7c3aed, #4faa82);

Build a CSS gradient visually — pick two colours, choose linear or radial, set the angle, and copy the ready CSS. The preview updates as you go. Free, no sign-up.

  • ✓Linear and radial gradients
  • ✓Two colours and an angle
  • ✓Live preview
  • ✓Copy the CSS with one click
  • ✓Free — no sign-up

Who it's for

  • Backgrounds and buttons
  • Hero sections and cards
  • Design prototyping
  • Learning CSS gradients

How it works

  1. 1Pick your two colours.
  2. 2Choose linear or radial and the angle.
  3. 3Watch the live preview.
  4. 4Copy the CSS.

Frequently asked questions

How do I make a CSS gradient?+

Use the background property with linear-gradient() or radial-gradient(), passing the direction and your colour stops. This tool writes it for you.

What's the difference between linear and radial?+

A linear gradient blends colours along a straight line at the angle you set; a radial gradient blends outward from the centre in a circle.

Is it free?+

Yes, completely free and runs in your browser.

You may like

Some links may be partner links — how this works

SponsoredFoldoutClean-code website, email and spreadsheet templates — free versions, $29 Pro.Visit↗SponsoredEnvatoUnlimited templates, fonts, photos, video and music — one subscription.Visit↗

Related tools

JSON formatter

Format, validate and minify JSON in your browser.

Base64 encoder / decoder

Encode or decode Base64 text, UTF-8 safe.

JWT decoder

Decode a JWT's header and payload in your browser.

Regex tester

Test regular expressions with live match highlighting.

URL encoder / decoder

Percent-encode or decode URLs and query strings.

UUID generator

Generate random UUID v4 identifiers in bulk.