The CSS gradients are types of background images and represents smooth transitions between colors.


background-image: <gradient-type> (direction, color-stop1 [stop-position1], color-stop2 [stop-position2], ...);

color-stop – can be: hex, named colors, rgba, hsla etc.

stop-position – (optional) – percentage, length, angle value when the color should start.

Gradient types

  • Linear gradient:
    • linear-gradient()
    • repeating-linear-gradient()
  • Radial gradient:
    • radial-gradient()
    • repeating-radial-gradient()
  • Conic gradient:
    • conic-gradient()
    • repeating-conic-gradient()

The colors hard switch

See the Pen Untitled by majadc (@majadc) on CodePen.

The chequered pattern used on the website.

See the Pen chequered pattern gradient by majadc (@majadc) on CodePen.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.