CSS Gradients

What is Gradients?

Gradients displays the combination of two or more colors as shown below.CSS gradients let you display smooth transitions between two or more specified colors.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all.

CSS gradients are represented by the data type, a special type of made of a progressive transition between two or more colors. You can choose between two types of gradients: linear (created with the linear-gradient() function) and radial (created with radial-gradient()).

Gradients can be used anywhere you would use an , such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly

Types of gradients

• Linear Gradients(down/up/left/right/diagonally)
• Radial Gradients

CSS Linear Gradients

Linear gradients are used to arrange two or more colors in linear formats like top to bottom

Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients "axis" can go from left-to-right, top-to-bottom, or at any angle you chose.

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.

A linear gradient creates a band of colors that progress in a straight line.

Top to bottom

Example -

#grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green);}

Run Example

Linear Gradient - Left to Right

By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction.

#grad1 { height: 100px; background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); }

Run Example

Linear Gradient - Diagonal

You can even make the gradient run diagonally, from corner to corner.

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

#grad { height: 200px; background: linear-gradient(to bottom right, red, yellow); }

Run Example

background: linear-gradient(angle, color-stop1, color-stop2);