CODDY Tool

CSS Gradient Generator

Create linear, radial and conic CSS gradients with a live preview.

Build a CSS gradient visually — add colour stops, set the angle or centre, and switch between linear, radial and conic — then copy the rule. No images, no libraries, just CSS.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

This is one of the thingsCSS Generatordoes — open it for everything else it supports.

Loading tool…

What CSS Generator supports

  • GradientLinear, radial and conic.
  • Box shadowLayered, with inset.
  • Text shadowGlow and emboss effects.
  • Border radiusPer-corner control.

About CSS Gradient Generator

A CSS gradient is drawn by the browser, not loaded as an image. It scales to any size without blurring, costs no extra network request, and can be animated or changed by a variable — which is why gradients returned to interface design once they became a CSS feature rather than a Photoshop export.

There are three kinds. A linear gradient runs along a line at an angle you choose. A radial gradient spreads outward from a point, in a circle or an ellipse. A conic gradient sweeps around a centre like a clock hand, which is what makes pie charts and progress rings possible without SVG.

Colour stops control everything. Two stops give a smooth blend; adding a third in the middle lets you steer the transition; placing two stops at the same position produces a hard edge, which is how CSS stripes and colour-band effects are made.

How to build a CSS gradient

  1. Pick a gradient type

    Linear runs along an angle, radial spreads from a centre point, conic sweeps around one.

  2. Set your colour stops

    Change the colours and drag each stop's position. Add up to six stops to steer the blend.

  3. Copy the CSS

    The full background-image declaration is generated below the preview, ready to paste.

Frequently asked questions

Which angle does 0deg mean in a linear gradient?

0deg points upward, and angles increase clockwise, so 90deg points right and 180deg points down. This trips people up because it differs from the convention used in transforms and in most maths.

Why does my gradient look striped?

That is banding, caused by displays having only 256 levels per channel. Over a large area the steps become wide enough to see. Adding intermediate colour stops, increasing the contrast between the ends, or overlaying faint noise all reduce it.

Can I animate a gradient?

Not by transitioning the gradient itself — browsers cannot interpolate between two gradient definitions. The usual approaches are to animate background-position on an oversized gradient, to cross-fade two stacked layers with opacity, or to animate a colour held in a custom property registered with @property.

Is a CSS gradient better than a background image?

Almost always. It costs no network request, scales to any size without softening, and can be recoloured by a variable. An image only wins when the artwork is genuinely photographic or too complex to express as colour stops.

Related tools

All Color & Design Tools

CSS Generator

Color & Design Tools

Build CSS gradients, box shadows, text shadows and border radii visually.

Box Shadow Generator

Color & Design Tools

Design layered CSS box shadows with a live preview and copy the code.

Color Palette Generator

Color & Design Tools

Build harmonious colour palettes from one base colour, ready to copy as CSS.

Color Converter

Color & Design Tools

Convert a colour between HEX, RGB, HSL, HSV, CMYK and OKLCH.

Contrast Checker

Color & Design Tools

Check any colour pairing against the WCAG AA and AAA contrast requirements.

CSS Gradient Generator is free to use with no account, no watermark and no usage limits. Last updated 14 August 2026.