Friday, July 24, 2020

CSS Gradient | CSS Shadow

CSS3 Gradients

The CSS3 gradient feature allows you to create a gradient from one color to another without using any images. CSS gradient feature provides a flexible solution to generate smooth transitions between two or more colors. These are the following reasons to use CSS gradient.

  • You don't have to use images to display transition effects.
  • The download time and bandwidth usage can also be reduced.
  • It provides better look to the element when zoomed, because the gradient is generated by the browser.

There are two types of gradient in CSS3.

  1. Linear gradients
  2. Radial gradients

CSS Linear Gradient

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.


background-image: linear-gradient(direction, color-stop1color-stop2, ...);


See the Pen CSS Gradient by PANKAJ (@pankkap) on CodePen.

CSS3 Radial Gradients

In a radial gradient color emerge from a single center point and smoothly spread outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients. The basic syntax of creating a radial gradient can be given with:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

The arguments of the radial-gradient() function has the following meaning:

  • position — Specifies the starting point of the gradient, which can be specified in units (px, em, or percentages) or keyword (left, bottom, etc).
  • shape — Specifies the shape of the gradient's ending shape. It can be circle or ellipse.
  • size — Specifies the size of the gradient's ending shape. The default is farthest-side.

The following example will show you create a radial gradient with evenly spaced color stops.

See the Pen CSS Radial Gradient by PANKAJ (@pankkap) on CodePen.

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

  background-image: radial-gradient(red 5%, yellow 15%, green 60%);

If you want it to be a circular gradient positioned at the center of the left edge, you can do that by using the circle keyword before the position:

background-image: radial-gradient(circle at 0% 50%, yellow, #009966, purple);