How to create CSS gradients

Open the CSS gradient designer and choose Background, Text or Artwork. The canvas updates instantly as you change colours, positions and direction, so the easiest way to learn is to experiment.

Start with one of the quick presets or use Surprise me for a new combination. You can then refine every colour rather than accepting a fixed palette.

Flat colours

Flat uses one colour with optional opacity instead of a blend. It can be used for backgrounds and layers, solid-colour text, artwork tints and image overlays.

Linear gradients

A linear gradient blends colours along a straight axis. Adjust the angle to send the blend horizontally, vertically or diagonally. Linear gradients are the most common choice for website backgrounds, buttons and gradient text.

Radial gradients

A radial gradient grows outward from a centre point. Move Centre X and Centre Y to position the glow or focal colour. Radial gradients work well for soft lighting, hero backgrounds and layered colour effects.

Conic gradients

A conic gradient rotates colours around its centre. Change both the angle and centre point to create colour wheels, metallic effects, charts and more experimental backgrounds.

A colour stop combines a colour with a position from 0% to 100%. Move two stops closer together for a faster transition or farther apart for a slower, softer blend. Add a third or fourth stop to create more expressive palettes.

For a smooth result, avoid putting very different colours extremely close together. For a deliberate stripe or hard edge, give two neighbouring colours the same—or nearly the same—position.

Select Add layer in the layers bar above the preview to place another gradient over the base layer, or choose Text or Artwork to add those as transparent overlay layers. Gradient, text and artwork layers can be dragged into the required z-index order.

Lower the opacity of an entire layer or individual colour stops to reveal the gradients below it. The generated CSS combines the layers as comma-separated background images, with the uppermost layer listed first.

.layered-gradient {
  background-image:
    radial-gradient(circle, rgba(255, 90, 180, .8), transparent 70%),
    linear-gradient(120deg, #5B5CF0, #FF8A4C);
}

Choose Text to add a text layer over the existing gradient background, then enter your wording and choose a Google font, size and weight. The text layer has its own gradient controls and can be dragged above or below other overlay layers.

.gradient-text {
  background-image: linear-gradient(120deg, #5B5CF0, #D946EF, #FF8A4C);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Upload an SVG, PNG, JPG or WebP, then choose one of three treatments:

• Original places the unmodified artwork over the gradient layers beneath it.
• Tint uses the visible shape of the artwork as a mask and fills it with the gradient. This is especially effective for transparent SVG logos and PNG icons.
• Overlay blends the gradient across an image using normal, multiply, screen, overlay or soft-light blending.

Your original upload is not modified. The editor creates a new preview and export in your browser.

The code panel beneath the canvas always reflects the current design. Select Copy CSS to place it on your clipboard. Background mode produces a standard background declaration; Text and Artwork modes include the additional properties required for those treatments.

Modern browsers support linear, radial and conic CSS gradients without image files, which keeps simple gradients sharp at every resolution.

Choose a landscape, square, portrait or classic canvas before exporting. Download PNG when you need transparency or lossless quality. Download JPG for a smaller photographic image with a white background behind any transparent areas.

Download SVG when the result needs to scale cleanly for a website, presentation or large-format design. The SVG keeps the complete composition self-contained; uploaded images are embedded so the file does not depend on a separate asset. Layered and conic designs use browser-rendered CSS inside the SVG, which some traditional illustration apps may not fully support.

PNG and JPG exports use the pixel dimensions shown above the canvas. SVG uses the same dimensions as its scalable viewBox.

Open a version of the designer prepared for a specific job, or read a focused guide to the underlying CSS.