CSS Function
linear-gradient()
The linear-gradient() function creates a gradient image transitioning between colors along a straight line.
Syntax
linear-gradient([angle | to side-or-corner,] color-stop [, color-stop]+)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| angle | angle | No | Direction angle (e.g., 45deg, 0.25turn). 0deg = to top, 90deg = to right |
| to side-or-corner | keyword | No | Direction keyword: to top, to right, to bottom left, etc. |
| color-stop | color [position] | Yes | A color and optional stop position (percentage or length) |
Examples
Simple two-color
Blue to purple horizontal gradient.
css
background: linear-gradient(to right, #3b82f6, #8b5cf6);Multi-stop with positions
Diagonal amber-red-purple gradient.
css
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%);Tailwind gradient
Tailwind provides gradient utilities with from/via/to.
html
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">Gradient</div>Browser Support
✓
Chrome
v26++
✓
Firefox
v16++
✓
Safari
v6.1++
✓
Edge
v12++
✓
Opera
v12.1++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
bg-gradient-to-{direction} from-{color} via-{color} to-{color}Frequently Asked Questions
How do I create a hard color stop (no blending)?▼
Place two stops at the same position: linear-gradient(to right, red 50%, blue 50%). This creates a sharp line.
Which color space is used for gradient interpolation?▼
By default, sRGB. In modern CSS, you can specify: linear-gradient(in oklch, to right, red, blue) for perceptually smoother gradients.
Explore CSS Color Tools
Try our free tools to work with linear-gradient() and other CSS color functions.
Open Tools