CSS Gradient Generator Guide: Linear, Radial & Conic Gradients
Quick Answer
- *CSS gradients create smooth color transitions using linear-gradient(), radial-gradient(), or conic-gradient() functions.
- *Linear gradients account for roughly 78% of gradient usage on the web according to the HTTP Archive's 2025 Web Almanac.
- *All three gradient types have 97%+ browser support in modern browsers — no vendor prefixes needed.
- *You can layer multiple gradients, animate them with CSS transitions, and apply them to text, borders, and backgrounds.
What Are CSS Gradients?
CSS gradients are image values that display smooth transitions between two or more colors. They render as backgrounds directly in the browser — no image files needed. This means zero HTTP requests, instant rendering, and pixel-perfect scaling on every screen size.
According to the HTTP Archive's 2025 Web Almanac, over 75% of websitesuse at least one CSS gradient. They replaced static gradient images almost entirely because they're resolution-independent and far smaller in file size.
The Three Types of CSS Gradients
Linear Gradients
Linear gradients transition colors along a straight line. The default direction is top to bottom.
Syntax: linear-gradient(direction, color1, color2, ...)
| Direction Value | Result |
|---|---|
to bottom (default) | Top to bottom |
to right | Left to right |
to bottom right | Diagonal |
45deg | 45–degree angle from bottom-left |
180deg | Same as top to bottom |
The W3C CSS Images Module Level 3 specification defines 0deg as pointing upward, with angles increasing clockwise. So 90deg points right, 180deg points down, and 270deg points left.
Radial Gradients
Radial gradients radiate outward from a center point in a circular or elliptical shape.
Syntax: radial-gradient(shape size at position, color1, color2, ...)
The shape can be circle or ellipse (default). Size keywords include closest-side, farthest-corner (default), closest-corner, and farthest-side. Position defaults to center but accepts any CSS position value.
Conic Gradients
Conic gradients rotate color stops around a center point, like the sweep of a clock hand. They're ideal for pie charts, color wheels, and decorative patterns.
Syntax: conic-gradient(from angle at position, color1, color2, ...)
According to Can I Use, conic gradient support reached 96.8% global coverage by early 2026, up from just 75% in 2020. The main holdout was IE11, which Microsoft officially retired in June 2022.
Color Stops: Controlling Where Colors Appear
Each color in a gradient can include an optional position value (percentage or length). Without explicit positions, colors distribute evenly.
| Technique | Example | Effect |
|---|---|---|
| Even distribution | linear-gradient(red, blue) | 50/50 split |
| Custom positions | linear-gradient(red 20%, blue 80%) | Red holds for 20%, then transitions |
| Hard stop | linear-gradient(red 50%, blue 50%) | Sharp line, no blend |
| Color hint | linear-gradient(red, 70%, blue) | Midpoint shifts toward blue |
Hard stops (two colors at the same position) create stripes. This technique powers pure-CSS stripe patterns without any images — the CSS Tricks Stripe Generator uses this exact principle.
Layering Multiple Gradients
CSS allows stacking multiple gradient layers on a single element using comma-separated values in the background property. The first gradient listed sits on top.
A common pattern: layer a semi-transparent gradient over a background image to ensure text readability. According to WebAIM's 2025 accessibility report, 83.6% of homepages had detectable contrast failures. Gradient overlays are one of the simplest fixes for text-over-image sections.
CSS Gradient Text Effects
Gradient text has become a design staple for hero sections and headings. The technique uses three properties:
background: linear-gradient(...)— applies the gradient-webkit-background-clip: text— clips the background to the text shape-webkit-text-fill-color: transparent— makes the text itself transparent so the background shows through
The -webkit- prefix is still required even in Firefox and Chrome as of 2026. The standard background-clip: textproperty is in the CSS Backgrounds Level 4 spec but hasn't shipped unprefixed universally yet.
Performance Considerations
CSS gradients render on the GPU in most browsers. Google's web.dev performance guidelines note that gradients are significantly faster than equivalent image files because they skip the decode-and-rasterize pipeline entirely.
That said, complex gradients with 10+ color stops or heavy use of repeating-linear-gradient() can trigger repaints during animation. For smooth gradient animations, animate the background-positionrather than regenerating the gradient values — this keeps the animation on the compositor thread.
Browser Compatibility in 2026
| Gradient Type | Global Support | Prefix Needed? |
|---|---|---|
| linear-gradient() | 97.5% | No |
| radial-gradient() | 97.3% | No |
| conic-gradient() | 96.8% | No |
| repeating-linear-gradient() | 97.5% | No |
| repeating-radial-gradient() | 97.3% | No |
Data sourced from Can I Use, January 2026. The only browsers lacking support are IE11 (retired) and Opera Mini (limited CSS rendering). No vendor prefixes are required for any gradient type in modern browsers.
Common Gradient Patterns
Two-Color Background
The simplest and most common pattern. Pick two brand colors or use a color and its lighter shade. According to a 2025 analysis of 10,000 popular websites by SimilarWeb, two-color linear gradients were the most-used gradient type, appearing on 62% of sites that use gradients.
Gradient Borders
Apply a gradient using border-image: linear-gradient(...) 1 or use the background-clip padding-box trick for rounded corners. Gradient borders don't work with border-radiusdirectly — the workaround involves a wrapper element with the gradient as its background.
Animated Gradient Backgrounds
Create a gradient larger than its container (e.g., background-size: 200% 200%) and animate background-position. This creates a smooth shifting effect without JavaScript. Stripe.com famously popularized this pattern for their homepage hero.
Build your perfect gradient visually
Use our free Gradient Generator →Frequently Asked Questions
What is the difference between linear and radial gradients in CSS?
A linear gradient transitions colors along a straight line (top to bottom, left to right, or any angle). A radial gradient transitions colors outward from a center point in an elliptical or circular shape. Linear gradients are more common for backgrounds and buttons, while radial gradients work well for spotlight effects and circular UI elements.
How do I create a diagonal CSS gradient?
Use the to bottom right keyword or a degree value like 135deg in your linear-gradient function. For example: background: linear-gradient(135deg, #667eea, #764ba2). The degree value rotates clockwise from the top, so 0deg goes bottom-to-top, 90deg goes left-to-right, and 135deg creates a top-left to bottom-right diagonal.
Can I use multiple color stops in a CSS gradient?
Yes. CSS gradients support unlimited color stops. Each stop can include an optional position as a percentage or length value. For example: linear-gradient(90deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%). You can also create hard color transitions by placing two stops at the same position.
Are CSS gradients supported in all browsers?
Linear and radial gradients have over 97% global browser support according to Can I Use data from 2026. Conic gradients sit at 96.8%. No vendor prefixes are needed for modern browsers. The only notable holdout was IE11, which Microsoft retired in 2022.
How do I make a CSS gradient text effect?
Apply a gradient background to the text element, then use -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the text shape and works in all modern browsers. It's commonly used for hero headings and marketing pages.