Linear Gradient And Its Applications

rainbow impact using linear gradient

Let’s brief a little about ‘Gradient’ in CSS.

Gradient is a special type of Image that doesn’t use any actual image file, instead you can define your own image with different properties using smooth transitions between two or more colours.

In CSS, there are total 5 types of gradients supported :

1. Linear-gradient
2. Radial-gradient
3. Repeating-linear-gradient
4. Repeating-radial-gradient
5. Conic-gradient

In this section, we will mainly discuss about Linear-gradient and how it makes web development more exciting.

We use Gradients mainly with background of an HTML element. Let’s look at its syntax :

background: linear-gradient(direction, color-1, color-2, …);

direction :- Specifies direction of colour transition. There are two ways to define gradient direction :

1. By specifying horizontal and vertical direction . For example :
   to right, to left, to top, to bottom, to top right, to bottom left etc.
   Note: By default, direction is from ‘top to bottom’
2. By specifying some angle. For example :
   90deg, 120deg, 180deg etc.

Example 1 :

linear-gradient(to bottom right, #00d4ff,#090979,#070259);

We can also add color-stops to define the amount of space taken by particular color. Syntax :
background: linear-gradient(direction, color-1 stop-percentage, color-2, …);

Example 2 :

linear-gradient(to bottom right, #00d4ff 50%,#090979,#070259);

Applications :

1. Enhance Semantic nature of progress bar or range slider.

linear-gradient(to right, #00d4ff,#090979,#070259);

In case you want to add range slider in your application, let’s say, amount selector or anything that indicates some quantity in ascending order, you can use Linear-gradient to make it more meaningful.

2. Allow White-text on any light coloured image.

Image before applying linear-gradient

Image after applying linear-gradient

There are many instances where you need to write text on the top of some image and if images are dynamic, you cannot set a particular font colour for all the images. In this case, Linear-gradient comes in rescue. You can define linear-gradient along with your image to get the desired result. Here is the code to achieve the above impact :

background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(‘./image-name.jpeg’);

That’s all for this section.

In case you like it, Please share it with your friends and hit ❤️. Feel free to comment if you want to share or discuss more on this.