CSS Gradient Generator: Linear & Radial Gradients Explained (Free, No Login)

CSS gradients are one of the most underused design tools in the modern web toolkit. They eliminate the need for background image files, scale to any size without pixelation, can be animated, and are supported in every modern browser. A gradient that would require a 20KB image file is expressed in a single line of CSS.

Understanding how to write and control gradients gives you significantly more visual flexibility — and a gradient generator lets you dial in exactly the effect you want visually before copying the code.

---

Generate Your CSS Gradient

---

Linear Gradients

The most common gradient type. Colour transitions along a straight line in any direction.

Basic Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction Options

/* By angle */
background: linear-gradient(45deg, #2563EB, #7C3AED);

/* By keyword */
background: linear-gradient(to right, #2563EB, #7C3AED);
background: linear-gradient(to bottom right, #2563EB, #7C3AED);

Multiple Colour Stops

/* Three colours */
background: linear-gradient(to right, #2563EB, #7C3AED, #EC4899);

/* With position control */
background: linear-gradient(to right, #2563EB 0%, #7C3AED 60%, #EC4899 100%);

/* Hard stops (no blend) */
background: linear-gradient(to right, #2563EB 50%, #7C3AED 50%);

---

Radial Gradients

Radiates outward from a centre point, like light from a source.

background: radial-gradient(shape size at position, color-stop1, color-stop2);

Examples

/* Circle from centre */
background: radial-gradient(circle, #2563EB, #111827);

/* Ellipse (default shape) */
background: radial-gradient(ellipse at center, #7C3AED 0%, #111827 100%);

/* Off-centre position */
background: radial-gradient(circle at 30% 70%, #2563EB, #111827);

/* Glowing effect */
background: radial-gradient(circle at center, rgba(37,99,235,0.8) 0%, transparent 70%);

---

Conic Gradients

Rotates around a centre point — like a colour wheel or a pie chart.

/* Pie chart style */
background: conic-gradient(#2563EB 0% 25%, #7C3AED 25% 50%, #EC4899 50% 75%, #10B981 75% 100%);

/* Smooth colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* From specific angle */
background: conic-gradient(from 45deg, #2563EB, #7C3AED, #2563EB);

Browser support: All modern browsers. Not supported in IE.

---

Repeating Gradients

For striped or patterned backgrounds:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  #2563EB 10px,
  #2563EB 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle at center,
  #2563EB 0px,
  #2563EB 10px,
  transparent 10px,
  transparent 20px
);

---

Practical Gradient Recipes

Glassmorphism Background

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);

Subtle Hero Section

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Dark Mode Card Highlight

background: linear-gradient(145deg, #1e293b, #0f172a);

Sunset Sky

background: linear-gradient(to bottom, #FF6B6B 0%, #FFE66D 50%, #4ECDC4 100%);

Text Gradient (CSS Clip)

background: linear-gradient(90deg, #2563EB, #7C3AED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

---

Gradients vs Images: Performance

For backgrounds, CSS gradients are almost always the better choice — faster, no extra request, and endlessly customisable without exporting a new file.

---

Accessibility Considerations

If you place text over a gradient background, the contrast ratio changes across the element. A light-to-dark gradient may have perfectly readable dark text on the light end and completely unreadable text on the dark end.

Solutions:

• Use a darker overall gradient with white text
• Add a semi-transparent dark overlay on the gradient before text
• Keep text within a consistently coloured portion of the gradient
• Always check contrast at the lowest-contrast point of the gradient

---

Privacy Note

FluxToolkit's gradient generator runs entirely in your browser. Colours and gradient configurations you create are not transmitted to or stored on our servers.

---

Frequently Asked Questions

Do CSS gradients work on all browsers?

Linear and radial gradients are supported in all modern browsers. Conic gradients require Chrome 69+, Firefox 83+, Safari 12.1+. All major browsers in current use support them.

Can I animate a CSS gradient?

CSS transition doesn't animate gradient values directly. To animate gradients, use CSS @keyframes with background-position on a larger gradient, or use background-size with an oversized gradient. JavaScript-driven animation is the most flexible approach.

What's the difference between linear-gradient and to right?

to right is a keyword direction equivalent to 270deg (pointing right). Using degrees gives more precise control — 45deg for a perfect diagonal, for example.

Can I use gradients as borders?

CSS doesn't support border: linear-gradient() directly. The standard technique is to use a gradient as a background with background-clip: padding-box and a transparent border, combined with a pseudo-element for the gradient border layer.

Does FluxToolkit store my gradient configurations?

No. Everything is processed locally in your browser.

---

Related Articles

• Color Palette Generator Guide — Build the colour system behind your gradients.
• Color Picker: HEX, RGB, HSL Guide — Find and convert the exact colour values to use in gradients.
• CSS Color Formats Guide — Understand HEX, RGB, HSL for gradient colour stops.
• Tint & Shade Generator Guide — Build gradient-ready colour scales from a single hue.
• Minify CSS, HTML & JavaScript — Optimise your CSS after adding gradient styles.