CSS Gradient Generator – Linear, Radial and Conic Gradients

Our free CSS gradient generator shows every change in a live preview, includes ready-made presets and writes a solid colour fallback above the gradient for very old browsers. It is useful for hero sections, buttons, cards, backgrounds and text effects, and it runs entirely in your browser.

Types of CSS Gradients

What the CSS Gradient Generator Lets You Control

• The gradient type: linear, radial or conic.
• The angle in degrees for linear gradients and the start angle for conic gradients.
• Two or three colours, picked with a colour picker.
• Where each colour starts and stops, as a percentage.
• Circle or ellipse shape for radial gradients.

How to Use the CSS Gradient Generator

Step 1: Pick a Preset or Start from Scratch

Click a preset such as Teal to indigo, Sunset or Ocean radial to load a ready-made gradient, or keep the default and build your own.

Step 2: Choose the Type, Angle and Colours

Select linear, radial or conic, drag the Angle slider and pick your colours. Tick Use 3 colours for a three-colour blend and move the stop sliders to change where each colour sits.

Step 3: Check the Live Gradient Preview

The preview box updates with every change, so you can see exactly how the gradient will look before you use it.

Step 4: Copy the CSS Gradient Code

Click Copy CSS to copy the background rule. Paste it into the CSS of any element, such as a section, button or card.

Every gradient you make with this CSS gradient generator is plain, standard code. There is no watermark, no account and no limit, so you can use the CSS gradient generator for client projects, themes and personal sites alike.

How to Use a Gradient in Your CSS

Apply the copied code to any element. The first line is a solid colour fallback and the second line is the gradient, so browsers that do not understand gradients still show a colour:

.hero {
  background: #0d9488;
  background: linear-gradient(135deg, #0d9488 0%, #6366f1 100%);
}

You can also use gradients for text by combining background-clip: text with color: transparent, or layer a gradient over an image by listing it before url() in the background property.

Gradient Ideas for Web Design

• Hero backgrounds: a diagonal two-colour gradient behind a headline makes a landing page feel modern without a heavy image.
• Buttons: a subtle gradient from a brand colour to a slightly darker shade gives buttons depth.
• Cards and badges: a soft pastel gradient helps featured items stand out from the rest of the page.
• Image overlays: a gradient from transparent to dark at the bottom of a photo keeps white captions readable.
• Charts and loaders: conic gradients can draw pie charts, progress rings and colour wheels with pure CSS.

Use the CSS gradient generator to try each idea in seconds, then copy the code and fine-tune it in your own stylesheet.

CSS Gradient Generator Tips

• Keep text readable: check the contrast of text against both ends of the gradient.
• Colours that sit next to each other on the colour wheel blend more smoothly than opposite colours, which can look muddy in the middle.
• Use 180deg for a top-to-bottom gradient and 90deg for left-to-right.
• Gradients are images in CSS, so use them with background or background-image, not background-color.

Frequently Asked Questions