linear-gradient()
A smooth transition between colors along a straight line — used as a background image.
Syntax
linear-gradient(direction, color stop, …)Parameters
| Parameter | Type | Description |
|---|---|---|
| direction | angle | to side | `to right`, `to bottom right` or an angle `45deg`; top to bottom by default. |
| color stop | color length | A color and optionally its position: `gold 30%`. |
Examples
Vertical, horizontal and a sharp edge — two stops at the same position:
<style>
div { height: 50px; margin-bottom: 6px; }
</style>
<div style="background: linear-gradient(gold, tomato);"></div>
<div style="background: linear-gradient(to right, royalblue, violet, hotpink);"></div>
<div style="background: linear-gradient(45deg, teal 50%, gold 50%);"></div>A repeating gradient for stripes:
<div style="height: 50px; background: repeating-linear-gradient(45deg, gold 0 10px, black 10px 20px);"></div>Notes
A gradient is an image, so it goes into background or background-image, not background-color.
See also
- radial-gradient() — A transition between colors from a center outwards.
- background-image — One or more background images: files or gradients.
- background — A shorthand for all background properties: color, image, position, size and repeat.
Related recipes
In the tutorial
- Shadows and gradients — Block and text shadows — box-shadow and text-shadow, linear and radial gradients, color stops.