If you want to add depth, energy, and a modern edge to your web designs, flat colors won’t always cut it. Enter the CSS linear gradient.
When done right, gradients can guide a user’s eye, make text pop, and give your UI a high-end feel. When done wrong, they can look like a muddy MS Paint project from 1998.
Let’s dive into how linear-gradient() works, how to control its direction, and how to keep your gradients looking crisp, clean, and accessible.
The Anatomy of a Linear Gradient
At its absolute simplest, a linear gradient blends two or more colors along a straight line.
In CSS, a gradient isn’t a color property; it’s an image. Therefore, you apply it using the background-image (or shorthand background) property.
.gradient-box {
background-image: linear-gradient(#ff7e5f, #feb47b);
}By default, if you don’t specify a direction, CSS will blend the colors from top to bottom.
Controlling Direction: Angles and Keywords
You aren’t locked into a top-to-bottom flow. You can steer your gradient using two methods: keywords or explicit angles.
1. Using Keywords
You can use the word to followed by up to two directional keywords (top, bottom, left, right).
to right: Left to rightto top left: Bottom right to top left (diagonal)
.horizontal-gradient {
background-image: linear-gradient(to right, #6a11cb, #2575fc);
}2. Using Angles (deg)
For precise control, use degrees.
0degpoints straight up.90degpoints to the right.180degpoints straight down (the default).
.angled-gradient {
background-image: linear-gradient(135deg, #f12711, #f5af19);
}Fine-Tuning with Color Stops
What if you don’t want an even 50/50 split between your colors? You can use color stops by adding a percentage or pixel value after the color code. This tells the browser exactly where that color should reach 100% strength.
.dramatic-gradient {
background-image: linear-gradient(to right, #3a7bd5 10%, #3a6073 90%);
}In this example, the first color dominates the first 10%, transitions smoothly across the middle (between 10% and 90%), and the final color takes over fully for the last 10%.
Creating Sharp Lines (Stripes)
If you set two adjacent color stops to the exact same percentage, you eliminate the transition entirely, creating a sharp, crisp line. This is incredibly useful for UI patterns or split backgrounds:
.sharp-split {
background-image: linear-gradient(90deg, #ff9a9e 50%, #fecfef 50%);
}Pro-Tips for Modern UI Design
1. Watch Out for the “Gray Dead Zone”
When you blend two complementary colors (like red and green, or blue and orange) across a gradient, the midpoint can often turn into a muddy, desaturated gray.
- The Fix: Add a third, vibrant transition color in the middle of your code to act as a bridge and keep the gradient looking alive and saturated.
2. Keep Text Accessible (WCAG Standards)
If you are overlaying text on top of a linear gradient, ensure your colors offer enough contrast. A brilliant, bright gradient might look great on its own, but if white text gets swallowed up by a light-orange color stop, it fails accessibility checks.
- Tip: Use tools to test the contrast of both the lightest and darkest points of your gradient against your text color to ensure a minimum contrast ratio of
4.5:1for regular text. The TrueCSSApp gradient generator includes a built-in WCAG contrast checker and text-on-gradient preview, so you can verify accessibility before shipping.
3. Smooth Transparent Overlays
Linear gradients are great for darkening images so text can sit safely on top. Instead of fading to a harsh \transparent keyword (which some older browsers render as a muddy transparent black), fade toward an RGBA value with 0 alpha:
.image-overlay {
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
}Summary Cheat Sheet
| Feature | Syntax Example | What it does |
|---|---|---|
| Basic | linear-gradient(blue, pink) | Top to bottom blend |
| Directional | linear-gradient(to right, blue, pink) | Left to right blend |
| Angled | linear-gradient(45deg, blue, pink) | Diagonal blend from bottom-left |
| Multi-color | linear-gradient(red, yellow, green) | Blends smoothly through three colors |
| Color Stops | linear-gradient(blue 20%, pink 80%) | Controls where the blending starts/stops |
Try It Yourself
Reading the syntax is one thing — seeing it update live is another. The TrueCSSApp gradient generator lets you drag color stops, adjust the angle visually, and copy the exact CSS or Tailwind code shown above without writing it by hand.
Looking for inspiration instead of starting from scratch? Browse ready-made combinations in blue gradients, sunset gradients, or the full gradient library.