CHAPTER 15

image

Gradients

A gradient is a color fill that blends smoothly from one color to another. Introduced in CSS 3, the gradient functions can be used anywhere an image is required according to specification, but they are mainly used together with the background or background-image properties to create a background gradient.

Linear gradients

The linear-gradient() function defines a gradient that provides a smooth transition from one color to another.

linear-gradient([<angle> | to <side-or-corner>]                {, <color stop> [stop position]} (2-) )

In its simplest form, the linear gradient consists of two colors with an even spread from top ...

Get CSS Quick Syntax Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.