Modern CSS Tools
Quick Answer

The CSS linear-gradient(), radial-gradient(), and conic-gradient() functions create smooth color transitions inside any element where an image is allowed. Modern browsers also support color-space interpolation — linear-gradient(in oklch, red, blue) — which produces perceptually uniform gradients without the muddy middle. Use this generator to build gradients visually and copy production-ready CSS.

CSS Gradient Generator

Updated

CSS gradients are one of the most expressive tools in a frontend developer's toolkit. This generator supports all three gradient types — linear, radial, and conic — with unlimited color stops. Click any stop to change its color, drag to reposition, and copy the output in either direct CSS or CSS variable format. Share your gradient with your team or clients using the URL — the state is fully encoded.

Most gradient generators stop at linear and radial. We added conic and the new color interpolation modes (in oklch, in srgb-linear) because that is where CSS gradients have been for two years now — even if most tools haven't caught up. If you're still writing linear-gradient(to right, red, blue), you're missing perceptually uniform color stops that fix the muddy gray middle. The full list of CSS gradient functions on MDN covers the syntax, but the part that took years to land is specified in CSS Color Module Level 4: gradients can now interpolate in OKLCH, OKLAB, sRGB-linear, and other spaces. web.dev's writeup on color spaces explains why that matters in practice — the short version is that interpolating red→blue in sRGB passes through gray, and interpolating in OKLCH passes through purple, which is what your eye expects.

What is a CSS Gradient?

CSS gradients let you display smooth transitions between two or more specified colors directly in your stylesheets, without needing image files. There are three types: linear-gradient() creates a color transition along a straight line at any angle; radial-gradient() radiates colors outward from a center point in an elliptical or circular pattern; and conic-gradient() sweeps colors around a center point like a color wheel. Modern browsers support all three types with multiple color stops and precise positioning controls.

Because gradients are generated by the browser rather than loaded as image files, they are resolution-independent and look crisp on every screen density, from standard displays to high-DPI Retina screens. They also add zero network overhead since no HTTP request is needed. Gradients are treated as CSS images, which means they work anywhere an image value is accepted: background-image, border-image, list-style-image, and even inside the content property of pseudo-elements.

Each gradient can have unlimited color stops, and you can specify the position of each stop as a percentage or a length value. Hard color stops — where two stops share the same position — let you create sharp lines and stripes without any blending. Combined with repeating-linear-gradient() or repeating-radial-gradient(), you can create complex tiling patterns entirely in CSS.

How to use this tool

Select a gradient type using the three buttons at the top — Linear, Radial, or Conic. Adjust the angle slider for linear and conic gradients; for radial gradients the angle control adjusts the gradient shape. Each color stop has a color picker and a position value — click the color swatch to open the color picker, or adjust the position slider to move the stop along the gradient axis. Add more stops with the "+ Add Color Stop" button, or remove stops with the x button on each stop row.

The preview updates in real-time as you make changes, so you can experiment freely. When you are happy with the result, copy the Direct CSS output to paste directly into your stylesheet, or use the CSS Variables format if you prefer to manage your design tokens through custom properties. The "Copy Share URL" button encodes the entire gradient state into the URL, making it easy to share with teammates or bookmark for later.

Practical examples

Text with gradient fill using background-clip

You can apply a gradient directly to text by setting the gradient as the element's background, clipping the background to the text shape, and making the text color transparent. This technique works in all modern browsers and is widely used for hero headings and brand elements.

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Gradient border using the background trick

CSS does not have a native gradient border property, but you can simulate one by layering two backgrounds: the inner background covers the content area using background-clip: padding-box, and the outer gradient covers the full border area using background-clip: border-box. A transparent border creates the visible gap.

.gradient-border {
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #f093fb, #f5576c) border-box;
  border-radius: 12px;
}

Repeating gradient stripe pattern

By using hard color stops (two stops at the same position) inside a repeating gradient, you can create clean stripe patterns without any blending. This is useful for progress bars, decorative backgrounds, and loading indicators.

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

/* Horizontal stripes */
.horizontal-stripes {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 20px,
    #f0f0f0 20px,
    #f0f0f0 21px
  );
}

Common patterns and best practices

CSS gradients are versatile, but a few practices will help you use them effectively and avoid common pitfalls.

Browser Support

Common Pitfalls

FAQ

When should I use a conic gradient?

Conic gradients are ideal for creating pie charts, color wheels, and angular sweeps. Unlike linear gradients that flow in one direction, conic gradients rotate colors around a center point — think of it like a clock face where each hour mark is a different color. They're also great for creating starburst and spotlight effects.

How do I animate gradients?

CSS gradients can't be directly animated with transitions because they're treated as images. However, you can animate gradients using the CSS @property rule to register custom properties with a syntax of <color>, then transition those properties. Alternatively, use background-size with a larger-than-viewport gradient and animate background-position.

Can I animate CSS gradients?

Not directly with the transition property, because gradients are generated images and CSS cannot interpolate between two image values. However, you can use the @property at-rule to register custom properties (such as angle values or color stops) with explicit syntax types, and then animate those individual properties. For example, registering --angle with syntax: "<angle>" lets you transition it, which in turn updates the gradient. Another common technique is to create a gradient larger than its container using background-size and animate background-position for a scrolling effect.

What's the difference between linear-gradient and repeating-linear-gradient?

A standard linear-gradient() fills the entire element with a single gradient pass, stretching from the first color stop to the last. A repeating-linear-gradient() tiles the gradient pattern to fill the element, repeating the color stop sequence beyond its defined range. This is particularly useful for creating stripes, barber-pole patterns, and other repeating textures entirely in CSS without needing image files.

How do I create a smooth gradient without banding?

Banding occurs when there aren't enough color values between stops for the browser to create a smooth transition, often visible on wide elements with subtle color changes. To reduce banding, use wider color transitions with more space between stops, add intermediate color stops to guide the interpolation, or switch to the oklch color space using linear-gradient(in oklch, ...) for perceptually uniform gradients. Some designers also add a very faint noise texture overlay to break up banding visually.

Related guides

Related tools