Ultimate Guide to CSS Gradients

What this article is about

  • Linear & Radial gradient syntax
  • What are color stops
  • Setting the direction of linear gradients
  • How CSS angles work
  • Changing the size, shape & position of radial gradients

Gradients are Images in CSS

Linear Gradients

Color Stops

3 gradients with 3 color-stops. Each with different color-stop positions.

Direction

CSS Angles

The gradient’s direction is indicated by the spinning arm. The corresponding angle in degrees is shown in the center.

Negative Angles

Radial Gradients

The final area of a default radial gradient with 2 color stops: white and #F0626C

Position

Shape

color-stop positions are adjusted in this example to better illustrate the differences

Size

Even though farthest-corner and closest-corner might look identical, they produce very different results when the origin position is not in the center.

Putting it all together

Click them, don’t be shy 👆

You might also like:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store