CSS Gradient Generator: Linear, Radial and Conic Gradients

What is it?

The CSS Gradient Generator designs Linear, Radial or Conic gradients with up to six colours, with a live preview and ready CSS.

Who is it for?

Web designers, Blogger theme editors and developers who want modern backgrounds and buttons without image files.

How to use it

Pick the Type. For linear, set the Angle; for radial, choose the Shape (Circle or Ellipse).
Under Colours and positions, set each colour and where it sits (0–100%). + Add colour adds one; Remove takes one away.
Start from Presets or press Random for ideas. Tap Copy CSS.

Using the CSS

Paste it into a CSS rule, for example .hero { background: linear-gradient(…); }. In Blogger, add it under Theme → Customise → Advanced → Add CSS or in your theme’s CSS.

Good gradients

Two or three colours close on the colour wheel look smooth; very different colours can look muddy in the middle.
Check text on top for contrast at both ends (the Color Converter & Contrast Checker helps).
Gradients are pure CSS: no image to download, so they load instantly.

Worked example

background: linear-gradient(135deg, #8B7CFF 0%, #22D3EE 100%); goes from purple at the top-left to cyan at the bottom-right. Changing 135deg to 90deg makes it run left to right.

Common mistakes

Using background-color instead of background or background-image: gradients are images, so background-color ignores them.
Gradient banding (visible stripes) on large areas: add a middle colour stop, or use colours closer together.
A gradient on body repeating in strips: add min-height: 100vh or background-attachment: fixed.

Text with a gradient

Use background-clip: text with color: transparent. Keep a solid fallback colour for older browsers.

Open the tool: CSS Gradient Generator

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.