Gradients
The CSS gradients are types of background images and represents smooth transitions between colors.
Syntax
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.