Skip to contentSellstamp
Get started

CSS gradient generator

Make a CSS linear, radial or conic gradient with up to eight colour stops, see it live, and copy the CSS.

Type

Stays on your device

Everything runs in your browser. Nothing you type is sent to Sellstamp or anyone else.

Building something to sell?

Sellstamp has a storefront, a checkout into your own payment account, automatic delivery and an API with webhooks. Open a free store

How to use it

  1. Choose linear, radial or conic.
  2. Set the angle and the colours and their positions.
  3. Copy the CSS.

Nothing you paste leaves this page

The conversion runs in this browser tab. Nothing is sent to Sellstamp or anyone else, which matters for configuration files, customer exports and tokens.

Using it

The CSS is a single background declaration that every current browser supports. Gradients scale to any size without becoming blurry and cost no download, which makes them a good alternative to a background image.

Questions

What is the angle?

The direction of a linear gradient: 0° goes upwards, 90° to the right, 180° downwards.

Can I make a smooth multi-colour gradient?

Yes. Add up to eight colours and set where each one sits.

How do I use it as text colour?

Set it as the background, then add background-clip: text and color: transparent to the element.

Do gradients work in all browsers?

Linear, radial and conic gradients work in every current browser.

Related tools

Popular free tools

All developer toolsEvery free tool