CSS Gradients in 2026: Linear, Radial, Conic, and the Brand-Defining Blend
Why Gradients Came Back
For most of the 2010s, flat design ruled. Then around 2018, Stripe, Linear and a wave of dev-tool startups started shipping interfaces built on **soft, multi-stop gradients** — and the industry pivoted. Today every brand identity worth a second look uses gradients somewhere: hero backgrounds, button states, illustration accents, dark-mode glow effects, marketing site backgrounds. Used well, a gradient signals modernity, energy and confidence without any of the maximalism of textures or photography.
Our [gradient generator](/gradient-generator) gives you a visual workbench for designing them. This piece is the conceptual companion — what the three gradient types actually do, when each one fits, and how to make gradients that age well.
Linear, Radial, Conic — Which One When
Linear gradients
The workhorse. Two or more colors blend along a straight line at a chosen angle. Use them for:
The most common angles are 135° (sunrise/sunset diagonal), 180° (top to bottom), and 90° (left to right). Pure horizontal/vertical can feel too neutral; the diagonals carry more motion.
Radial gradients
A circular blend outward from a center point. Use them for:
Radial gradients shine in dark themes — a single 600px radial blob at 5-10% opacity adds depth without competing with content.
Conic gradients
The newest of the three (Safari shipped support in 12.1, 2019). They sweep colors around a center point like a pie chart and are responsible for two distinctive 2020s effects:
Conic is also the only way to build a color wheel in pure CSS.
Stop Placement Matters More Than Colors
Beginners tweak colors. Pros tweak stop positions. Take any two-color gradient — say `#ff6b35` to `#e84393`. With stops at 0% and 100%, you get a 50/50 blend through the entire band. Move the stops to **30%** and **70%** and the middle becomes a wider, more confident transition with crisp anchor colors at the ends. Push them to **10%** and **90%** and you get a softer, more painterly blend.
Three-stop gradients are where things get interesting. Add a middle color to control where the blend turns. The classic "sunset" puts a saturated orange at the midpoint between yellow and pink — without that anchor, the middle goes muddy.
Angle Math (Briefly)
CSS angles use clockwise rotation from 12 o'clock. So:
Browsers normalize, so `450deg` is the same as `90deg`. The `to bottom right` keyword form is equivalent to `to <corner>` and adjusts automatically for non-square containers — useful when your element's aspect ratio changes.
The Tailwind Question
Tailwind v3 ships `bg-gradient-to-br` and friends, but they only support two-stop gradients with fixed direction keywords. For anything richer, use **arbitrary values**:
```html
<div class="bg-[linear-gradient(135deg,#ff6b35_0%,#e84393_100%)]">
```
Underscores replace spaces inside the arbitrary value. The output of our gradient generator gives you this string ready to paste. For Tailwind v4, prefer the new `@utility` directive to centralize repeated gradients.
Performance
Gradients are cheap. The browser renders them on the GPU as a single fill operation — no extra HTTP request, no decode cost like an image background. The exceptions:
Accessibility
Always ensure body text on a gradient passes WCAG AA contrast (4.5:1). Test against both the lightest and darkest points of the gradient — a contrast that works at the midpoint may fail at one of the stops. When in doubt, lay a subtle solid-color overlay (5-15% black or white) on top of the gradient and put text on the overlay; you keep the gradient mood and gain reliable contrast.
Conclusion
Gradients are one of the few visual techniques where a small kit of decisions — type, angle, two or three stops, position — covers 90% of what you'll ship. Use linear for surfaces and buttons, radial for glow and spotlight, conic for aurora and chrome. Tweak stop positions before you tweak colors. Export CSS for the web, SVG for design tools, PNG for slides. Our [gradient generator](/gradient-generator) does all of it in your browser — design, copy, export, ship.