CSS gradients have transformed how we approach backgrounds, borders, and visual effects on the web. Instead of relying on image files for every background pattern, developers can now create stunning visual effects with pure CSS — from subtle color transitions to complex, multi-stop compositions. A CSS gradient generator makes this process visual and intuitive, but understanding the underlying syntax gives you the power to fine-tune results that generators alone can't achieve.
This guide covers all three gradient types in CSS — linear, radial, and conic — with detailed syntax breakdowns, practical examples, performance tips, and cross-browser compatibility advice.
Linear gradients transition colors along a straight line. They're the most commonly used gradient type and form the backbone of most gradient-based UI designs.
background: linear-gradient(direction, color-stop1, color-stop2, ...);The direction can be specified as an angle (in degrees), a keyword (to top, to right, to bottom right, etc.), or omitted entirely (defaulting to to bottom, which flows from top to bottom).
Using degrees gives you precise control over the gradient direction. The angle is measured clockwise from the top of the element:
/* Diagonal from top-left to bottom-right */
background: linear-gradient(135deg, #8b5cf6, #ec4899);
/* Horizontal from left to right */
background: linear-gradient(90deg, #0f1117, #8b5cf6);
/* Vertical from bottom to top */
background: linear-gradient(to top, #1e1b2e, #0f1117);A common mistake is confusing the angle direction. Remember that 0deg points upward, and angles rotate clockwise. So 90deg goes to the right, 180deg goes downward, and 270deg goes to the left.
Color stops define where each color begins and ends in the gradient. You can use any valid CSS color and optionally specify a position:
/* Two equal stops */
background: linear-gradient(135deg, #8b5cf6, #ec4899);
/* With explicit positions */
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #ec4899 100%);
/* Hard edge (no transition between colors) */
background: linear-gradient(90deg, #8b5cf6 50%, #ec4899 50%);When positions overlap, the transition becomes a hard edge — useful for creating striped patterns or sharp color boundaries. When you omit positions, the browser distributes colors evenly across the gradient line.
Radial gradients transition colors outward from a central point (or inward, depending on perspective). They're ideal for creating spotlights, vignettes, and circular visual elements.
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);The shape can be circle (equal width and height) or ellipse (default, adapts to the element's aspect ratio). Circles work well for icons and avatars, while ellipses are better for full-page backgrounds.
The size keyword controls how far the gradient extends:
closest-side — gradient reaches the nearest edgefarthest-side — gradient reaches the farthest edgeclosest-corner — gradient reaches the nearest cornerfarthest-corner — gradient reaches the farthest corner (default)You can also specify exact size using length values for circles or percentage-based sizing for more control.
The center point defaults to the element's center but can be moved using the at keyword with position values:
/* Spotlight in the top-right corner */
background: radial-gradient(circle at 80% 20%, #8b5cf6, transparent 60%);
/* Vignette effect */
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%);Conic gradients transition colors around a central point, like the segments of a pie chart or color wheel. They're the newest gradient type and open up creative possibilities that linear and radial gradients can't achieve.
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);The from angle sets the starting position of the gradient (default is 0deg, which is at the top). Color stops are placed clockwise from that starting angle:
/* Pie chart effect */
background: conic-gradient(#8b5cf6 0% 25%, #ec4899 25% 50%, #f59e0b 50% 75%, #10b981 75% 100%);
/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Soft conic glow */
background: conic-gradient(from 45deg, #8b5cf6, #ec4899, #8b5cf6);Conic gradients are especially powerful when combined with border-radius: 50% to create circular patterns, or when used with mask and clip-path for complex shape fills.
All three gradient types have repeating variants: repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient. These automatically tile the gradient pattern to fill the element, making them perfect for stripes, checkerboards, and repeating patterns.
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#8b5cf6,
#8b5cf6 10px,
transparent 10px,
transparent 20px
);
/* Radial dots */
background: repeating-radial-gradient(
circle at center,
#8b5cf6 0px,
#8b5cf6 4px,
transparent 4px,
transparent 8px
);The key to repeating gradients is ensuring your color stops create a pattern that seamlessly tiles. The distance between the first and last stop within one repetition cycle defines the tile size.
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);background: linear-gradient(to bottom, #f97316, #ec4899, #8b5cf6, #3b82f6);background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 50%, #e5e7eb 100%);background: linear-gradient(145deg, #1a1a2e, #0f1117);border: 3px solid transparent;
background: linear-gradient(#0f1117, #0f1117) padding-box,
linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b, #10b981) border-box;CSS gradients enjoy excellent support across modern browsers, but there are a few considerations for older environments:
Modern browsers no longer require vendor prefixes for gradients. However, if you need to support very old browsers (Android 4.3 and below, or old WebKit), you may need -webkit- prefixed versions. For most projects in 2026, unprefixed gradients are perfectly safe.
Conic gradients are the least supported of the three types. While all modern browsers support them, older Safari versions (before Safari 12.1) may not. If conic gradients are critical to your design, include a solid color fallback:
background: #8b5cf6; /* Fallback */
background: conic-gradient(#8b5cf6, #ec4899, #8b5cf6);The in keyword (introduced in CSS Color Level 4) lets you control the color space used for interpolation between stops. Using in oklch or in hsl can produce more vibrant and perceptually uniform transitions compared to the default sRGB interpolation:
/* More vibrant transition using OKLCH */
background: linear-gradient(in oklch, #8b5cf6, #ec4899);Applying gradients to text uses background-clip: text combined with -webkit-text-fill-color: transparent. The -webkit- prefix is still needed for this specific property across all browsers:
background: linear-gradient(135deg, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;will-change sparingly — adding will-change: background can help if you're animating gradient positions, but it consumes memory. Only use it on elements that actually animate.repeating-linear-gradient with many small tiles can be more expensive than a simple tiled SVG pattern for very complex designs.A gradient generator simplifies the process of creating complex gradients by providing a visual interface. Here's how to work with one effectively:
Yes, CSS gradients support unlimited color stops. You can add as many colors as you need, each with optional position values. Multi-color gradients are common for sunset effects, rainbow patterns, and complex visual designs.
A standard linear-gradient fills the entire element with a single transition. repeating-linear-gradient tiles the gradient pattern infinitely. Use repeating gradients for stripes, patterns, and any design that needs a regular, repeating visual motif.
Use transparent or rgba() with an alpha of 0 as one of your color stops. For example, linear-gradient(to bottom, #8b5cf6, transparent) fades from purple to invisible. This technique is widely used for overlays and fade effects.
CSS gradients are images, not animatable properties. You can't directly transition between two gradients. Workarounds include animating background-position (for a sliding effect), using @property to register custom properties for angle animation, or layering gradients with opacity transitions.
Yes, using the border-image property or the background-clip: border-box technique with a transparent border. The background-clip method is more widely supported and easier to control, especially for rounded borders.
Conic gradients excel at creating pie charts, color wheels, radar charts, and any circular segmented design. They're also used for creative loading spinners and unique background effects that radial gradients can't achieve.
Use explicit color stop positions. For example, linear-gradient(90deg, red 0%, blue 30%, green 70%, yellow 100%) places each color at a precise percentage along the gradient line. You can mix positioned and unpositioned stops in the same gradient.
In most cases, yes. CSS gradients are generated by the browser at render time, so they don't require additional HTTP requests. They scale infinitely without quality loss and adapt to any container size. However, very complex gradients with many stops may be slower to paint than a simple raster image on low-powered devices.