CSS Gradient Generator

Why You Are Here

Gradients are easy to write and hard to write well. The syntax takes thirty seconds to learn, but the difference between a gradient that looks polished and one that looks amateur comes down to details that are difficult to judge without seeing the result: the angle, where the color stops sit, and whether the two colors you picked produce a muddy band through the middle.

That is the real reason a visual generator matters. You are not here because you cannot remember linear-gradient(). You are here because you want to see the gradient while you adjust it.

The first situation is building a background or hero section. You need something more interesting than a flat color but you do not want to load an image file. A gradient gives you visual depth in around a hundred bytes of CSS that scales to any screen size without going blurry.

The second is matching a design spec. A designer handed you a Figma file with a gradient in it, and you need to reproduce the angle and stop positions accurately in CSS rather than approximating by eye.

The third is exploring. You know roughly what you want, warm and energetic or cool and calm, but you need to try twenty combinations quickly to find the one that works with the rest of your interface.

What This Tool Does

The CSS Gradient Generator gives you visual controls for building a gradient and outputs the CSS as you work.

Choose your gradient type: linear for a straight-line transition, radial for a circular or elliptical spread from a center point, or conic for a sweep rotating around a center.

Set your colors and stop positions, adjust the angle or center position, and watch the preview update in real time.

Copy the generated background value and paste it into your stylesheet.

The Three Gradient Types

Linear gradient

Transitions colors along a straight line at whatever angle you specify. This is the workhorse: hero backgrounds, button fills, section dividers, progress bars, and image overlays.

background: linear-gradient(90deg, #8B5CF6, #EC4899);

Radial gradient

Transitions outward from a center point in a circle or ellipse. Use it for glows, spotlight effects, soft vignettes, and anything that should draw the eye toward a focal point.

background: radial-gradient(circle at center, #A18CD1, #FBC2EB);

Conic gradient

Sweeps colors around a center point like the hand of a clock. Reach for it when you need pie charts, color wheels, loading spinners, or angular decorative effects.

background: conic-gradient(from 0deg, #FF6B6B, #FECA57, #48DBFB, #FF6B6B);

Gradient Angle Reference

CSS gradient angles are a common source of confusion because they do not work the way most rotation systems do. In CSS, 0deg points UP, and the angle increases CLOCKWISE.

Color Stop Positioning

By default, colors distribute evenly. Two colors sit at 0% and 100%; three colors sit at 0%, 50%, and 100%. You override that by adding a position after any color.

Practical Gradient Recipes

These are the patterns developers actually search for, with the complete CSS each one needs.

Text with a gradient fill

.gradient-text {
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* All four properties are required. Without color: transparent
   the text covers the gradient, and the -webkit- prefix is
   still needed for Safari. */

Gradient border

.gradient-border {
  border: 4px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #8B5CF6, #EC4899) border-box;
}

/* There is no border-gradient property in CSS. The trick is
   layering two backgrounds and clipping one to the padding box
   and one to the border box. */

Readable text over an image

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('hero.jpg') center / cover;
}

/* A flat semi-transparent gradient layered over the image
   darkens it uniformly so white text stays legible. */

Animated gradient background

.animated {
  background: linear-gradient(270deg, #8B5CF6, #EC4899, #3B82F6);
  background-size: 600% 600%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Gradients cannot be transitioned directly because a gradient
   is an image, not a color. Oversize the background and animate
   its position instead. */

Fade-out edge

.fade-bottom {
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Using a gradient as a mask fades an element out rather than
   laying a color over it, which works over any background. */

Gradient Use Case Reference

Understanding Color Banding

Banding is the visible stepping you sometimes see across a gradient instead of a smooth blend: faint stripes running perpendicular to the gradient direction. It shows up most on large areas, on gradients between similar colors, and on displays with limited color depth.

It happens because the screen has a finite number of colors available. Spread a subtle transition across two thousand pixels and there are not enough distinct values to fill every step, so the browser repeats values and you see the seams.

background: linear-gradient(in oklab, #FF6B6B, #4ECDC4);

/* Browser support for this syntax is good in current versions
   but not universal. Provide a standard gradient as a fallback
   declaration before it if you support older browsers. */

Common Mistakes to Avoid

Quick Reference