CSS3 Tutorial

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 box-shadow

CSS3 text-shadow

CSS3 word-wrap

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 Nested Menu

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS Question-Answer

Page Stats

Visitor: 406

CSS3 Gradient

CSS3 gradient is use to display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed.

CSS3 defines two types of gradients:
1. Linear Gradients
2. Radial Gradients

CSS3 Linear Gradient

To create a linear gradient you must define at least two colors. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Example 1: Linear Gradient - Top to Bottom (Default)


Linear Gradient Directions

Example: Linear Gradient Directions

Linear Gradient direction - Diagonal

Example: Linear Gradient Diogonal Directions.

Linear Gradient using Angle

Linear Gradient using Angle - You can also define an angle, instead of the predefined directions. The angle is specified between -360deg to 360deg.

Repeating a Linear Gradient

We can repeat the gradient effect using repeating-linear-gradient() function.

Exercise 1: Underline using Linear Gradient Download

Exercise 2: Background using Linear Gradient Download