CSS - Gradient


Color gradient in CSS are created via gradient functions that creates an image.


CSS - Function

The definitions and whole list can be found in the specification.



With the linear-gradient 1) function.

linear-gradient() = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list>)


  • angle or to side-or-corner defines the direction of the line
  • color-stop-list defines color and their start and end position

Example: the french flag

  • A box with a height and a width filled with a linear gradient
.french-flag {
  background-image: linear-gradient(to right, blue 0% 33%, white 33% 66%, red 66% 100%);
  border: 1px solid grey;
  • The HTML
<div class="french-flag"></div>
  • The result:

Documentation / Reference

Discover More
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - How to set an opacity (on any element, background image included)

This article shows you what are the two options to set an opacity on HTML element. Namely, the opacity property and the alpha of a generated image.
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...

Share this page:
Follow us:
Task Runner