Gradients

In CSS, we can set multiple backgrounds to a DOM element by using CSS Gradients. There are 3 types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)
  • Conic Gradients (rotated around a center point)

image

Example 1: Linear Gradients Demo

image

Example 2: Radial Gradients Demo

image

Example 3: Conic Gradients Demo

image

Example 4: Multiple layers of background Demo

Radial Gradients

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • shape: circle/ellipse (default is ellipse)
  • size: closest-side/farthest-side/closest-corner/farthest-corner (default is farthest-corner)
  • position: default is center
  • color: is a color value (red, #fff, rgba(0,0,0,0.5), etc.) followed by one or two top positions.

image

image

Example 5: Ellipse shape Demo

image

Example 6: Custom position Demo

image

Example 7: Color Demo

Draw a custom shape

Issue

In our situation, we have a scrollable content with red color, there is a white sticky header with border radius. If scrolling down, we can see the background of the content is displayed at the corders of the header:

image

Demo

Solution

We can draw 2 custom shapes on top the the header to hide the red color at the corners.

Demo