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 -

Linear Gradient - Left to Right

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

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.

Using Angles

If you want more control over its direction, you can give the gradient a specific angle.The angle is specified as an angle between a horizontal line and the gradient line.

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

Using more than two colors

You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.

Positioning color stops

You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one a percentage or absolute length value. If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you.

A basic radial gradient

As with linear gradients, all you need to create a radial gradient are two colors.

CSS3 Repeat Radial Gradients

Use of Different Size Keywords

The size keywords tell the radial gradient where the farthest radius should be; i.e. the place where the last colour becomes fully saturated.This can be at the closest or farthest side or corner. The default is farthest-corner. If you need a more specific size, use length units instead of keywords.

The size parameter defines the size of the gradient. It can take four values:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner