How to work with gradients in CSS3

How to work with gradients in CSS3

CSS3 gradients are used to display smooth transitions between two or more colors. Images were used earlier to display effects, but now in CSS3 we can use gradients. Gradients  save bandwidth and load time. In a previous tutorial you learned about CSS3 Pseudo classes. In this tutorial we are going to learn how to work with gradients in CSS3. Gradients can be used with background property. All modern browsers support gradients.

 

CSS3 provide two types of gradients.

  1. Linear Gradient

  2. Radial Gradient

Linear Gradients in CSS3

To create a linear gradient, you have to define at least two color stops. Color stops are the colors that we want to transition.

Syntax of Linear Gradient

We define a direction and color stops with comma separated values.

Linear Gradient – Top to bottom

Consider the HTML page below.

You can also provide direction of gradient, by default it is top to bottom.

gredients in css3

Linear Gradient – Left to Right

Gradients can be from left to right, so we use to right.

 

gradients in css3

Using Angles in linear gradients in CSS3

Angles can also be used in a linear gradient. Instead of using directions like to bottom, to top, to right, to left, to bottom right. Consider the code below.

This code generates a linear gradient in -90 degree angle.

Linear Gradient with multiple color stops

Multiple colors can be added as color stops in a linear-gradient. Below is a linear gradient  from left to right with multiple color specified.

gradients in css3

Transparent Linear Gradient

To add transparency to a gradient we can use rgba function for color stops and provide a value for transparency. Transparency value can be from 0 to 1.

Above is a left to right gradient with rgba colors and transparency as well.

Repeating Linear Gradients in CSS3

To repeat linear gradient, repeating linear gradient can also be used.

gradients in css3

 

Redial gradients in CSS3

Radial gradients are defined by their center. A radial gradient have two color stops at least.

By default, ellipse is used as a shape in a radial gradient, farthest-corner is the size, and center is position of a radial gradient.

gradients in css3

By default all colors will be evenly spaced but you can give different color spaces as well.

gradients in css3

Shapes in radial gradient

By default a radial gradient has a shape ellipse, but it can be circle or ellipse.

We can use different sizes for radial gradient. you can use closest-side, farthest-side, closest-corner or farthest-corner.

Repeating radial gradients in CSS3

To repeat a radial gradient you can use repeating-radial-gradient().

gradients in css3

You can see the repeating linear gradient above with red, yellow and green color stops.

Summary

In this tutorial we learned about gradients in CSS3 and two types of gradients one is linear gradients and radial gradients. you can learn more about gradients from Mozilla Developer Network.

Please leave your feedback and comments below. Follow us on Twitter and follow us on Facebook to get notified about upcoming tutorials.

 

Save

Save

Save

Save

Save

Save

Leave a Reply

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