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.
- Linear gradients
- 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.
Syntax
background-image: linear-gradient(direction, color-stop1, color-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);
CSS Shadow