Three gradient types, one angle system that trips up almost everyone at least once, and a text trick that looks like magic the first time you see it. Here's how CSS gradients actually work, with copy-paste code for the patterns you'll use most.
Linear, Radial and Conic — The Three Gradient Types
CSS supports three distinct gradient functions, and picking the right one for the effect you want matters more than most people realise — each transitions color along a fundamentally different axis.
📏
Linear Gradient
Transitions along a straight line at a chosen angle — the most common type.
⭕
Radial Gradient
Transitions outward from a center point in a circular or elliptical shape.
🎡
Conic Gradient
Rotates colors around a center point by angle, like a color wheel or pie chart.
🎨
Unlimited Color Stops
All three types support any number of color stops — no hard limit.
CSS Gradient Angles Explained
Linear gradient angles in CSS follow a clockwise convention starting from the top — which trips up developers coming from other tools or math contexts where 0° often points right, not up.
Angle
Direction
0deg
Bottom → top
90deg
Left → right
180deg
Top → bottom
270deg
Right → left
135deg
Top-left → bottom-right (a very common diagonal choice)
💡
You can also use keyword directions like to right or to bottom right instead of degree values — these are often more readable in code and self-documenting, at the cost of slightly less precise control than an exact angle.
Color Stops — How Positioning Works
Each color in a gradient is a "stop," and you can optionally specify exactly where along the gradient that color should be reached, using a percentage or length value.
Without explicit positions, CSS spaces stops evenly across the gradient automatically. Adding explicit positions lets you create sharp transitions, uneven color distribution, or hard color bands instead of smooth blends.
The Gradient-Text Trick
One of the most visually striking CSS techniques uses a gradient as text fill instead of a solid color — commonly seen in modern landing page headlines.
The mechanism: the gradient is set as a background image on the text element, background-clip: text masks it to only show through the text characters, and color: transparent hides the fallback solid color underneath. Safari specifically still requires the -webkit- prefixed version of background-clip for this to render correctly.
Worked Example — A Button Hover Gradient
A common UI pattern: a button with a subtle gradient that shifts on hover for a satisfying interactive feel.
Transitioning the background property directly works in most modern browsers for gradient-to-gradient hover states, though results can vary slightly by browser engine. For guaranteed smooth transitions, some developers instead overlay a second gradient layer and animate its opacity. Build and preview gradients like this instantly with ToolLoom's CSS Gradient Generator — copy the exact CSS or Tailwind class with one click.
Common Gradient Patterns for UI
Hero section backgrounds — subtle diagonal (135deg) gradients between two brand colors
Card hover glows — radial gradients centered where the cursor enters, for a spotlight effect
Progress rings and dials — conic gradients are the natural fit for circular progress indicators
Overlay gradients on images — a linear gradient from transparent to a solid color, layered over a photo to ensure text readability
Skeleton loading shimmer — an animated linear gradient sweeping across a placeholder shape
Gradient text headlines — the background-clip technique for eye-catching hero titles
Do You Still Need Vendor Prefixes?
For the gradient functions themselves — no. -webkit-linear-gradient and similar prefixed syntaxes were necessary roughly a decade ago for older browser versions, but all modern browsers have supported the unprefixed linear-gradient(), radial-gradient(), and conic-gradient() syntax for years now.
⚠️
The one notable exception is background-clip: text for the gradient-text technique, which Safari still requires as -webkit-background-clip: text. Include both the prefixed and unprefixed versions for that specific property to be safe.
Common Gradient Mistakes
Assuming 0deg points right — CSS gradients start from the top, not the standard math convention
Forgetting -webkit-background-clip for gradient text — breaks the effect specifically in Safari
Using too few color stops across a large gradient area — causes visible banding, especially on lower color-depth displays
Overusing gradients on every element — subtlety generally reads as more polished than heavy, saturated gradients everywhere
Not testing gradient contrast for text overlays — a gradient background needs to maintain sufficient contrast with any text placed on top, at every point along the gradient
🎨 Build Your Gradient Visually — Free
Linear, radial and conic gradients with a live preview — copy ready CSS or Tailwind classes instantly.
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circular or elliptical pattern. A conic gradient rotates colors around a center point like a color wheel, transitioning by angle rather than distance — making it the natural choice for pie-chart-style visuals and color wheel pickers.
0deg points the gradient from bottom to top, 90deg from left to right, 180deg from top to bottom, and 270deg from right to left, following the standard clockwise CSS angle convention starting from the top. 135deg (top-left to bottom-right) is one of the most commonly used diagonal angles in modern UI design, giving a natural-looking diagonal flow.
Set the gradient as background-image on the text element, then add background-clip: text (with the -webkit- prefix for broader compatibility) and color: transparent. This makes the text characters themselves act as a mask revealing the gradient underneath, instead of displaying a solid text color. It works in all modern browsers, though Safari specifically still expects the -webkit- prefixed version.
No, not for the gradients themselves. Vendor prefixes like -webkit-linear-gradient were needed for older browsers roughly a decade ago, but all modern browsers have supported the unprefixed linear-gradient, radial-gradient, and conic-gradient syntax for years. The one common exception is background-clip: text, which Safari still requires as -webkit-background-clip: text for the gradient-text technique specifically.
CSS gradients support any number of color stops — there's no hard limit defined in the specification. Each stop defines a color and, optionally, an explicit position along the gradient (as a percentage or length) where that color should appear, giving fine control over exactly where transitions happen.
Visible banding usually comes from limited color depth on the display combined with a gradient spanning a large area with few color stops, or from placing two color stops very close together in position while far apart in hue, creating an abrupt-looking transition. Adding intermediate color stops, using colors closer in hue, or applying a subtle noise/dither overlay are common fixes for visible banding on large gradient areas.
About ToolLoom: We build free tools for Indian students, professionals and creators. All gradient generation and preview rendering happens instantly in your browser — nothing is uploaded or stored. Found an error? Email contact@toolloom.in