What is CSS gradients

How to use gradient in text with CSS?

CSS gradients mean minimum two-color and maximum as you want, if you are getting two-color then it will show smoothly merged or you can see both color-separated only from color. where we use a solid background color, we can use background gradient color as any boxes or body color.

If you want use gradient color in text then we need two css property mendatory: "-webkit-background-clip: text" , "-webkit-text-fill-color: transparent" .

CSS gradient available two types:-
Linear Gradients: CSS linear gradients work with axis up, down, left, right, diagonally.
Radial Gradients: CSS radial gradients work with the inner center to the outer side.

Code demo

<style>

.textMain {

    text-transform: uppercase;

    background: #fcecfc;

    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);

    background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font: 3vw arial;

    font-weight: 700;

}

.gradientInBackground {

    background: #fcecfc;

    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);

    background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 );

    font:normal 24px Arial, Helvetica, sans-serif;

    font-weight: 700;

    max-width: 300px;

    padding: 20px;

    color: #fff;

    margin: 10px 0;

    border-radius: 8px;

    border: 1px solid #ff7cd8;

}

.textwithFontIcon{ color: #0b6;font-size: 50px; font-family: Arial, Helvetica, sans-serif; margin: 50px 0; font-weight: 700; text-transform: uppercase;}

.textwithFontIcon .far{background: #fcecfc;

    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);

    background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;}

.mainTextRadial{background: #ffb5b5;

    background: -moz-radial-gradient(center, ellipse cover, #ffb5b5 0%, #3f4c6b 100%);

    background: -webkit-radial-gradient(center, ellipse cover, #ffb5b5 0%,#3f4c6b 100%);

    background: radial-gradient(ellipse at center, #ffb5b5 0%,#3f4c6b 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb5b5', endColorstr='#3f4c6b',GradientType=1 );-webkit-background-clip: text;

    -webkit-text-fill-color: transparent; font-size: 100px; font: 3vw arial;

    font-weight: 700; text-transform: uppercase; margin: 30px 0;}

.mainTextRadial .far{background: #ffb5b5;

    background: -moz-radial-gradient(center, ellipse cover, #ffb5b5 0%, #3f4c6b 100%);

    background: -webkit-radial-gradient(center, ellipse cover, #ffb5b5 0%,#3f4c6b 100%);

    background: radial-gradient(ellipse at center, #ffb5b5 0%,#3f4c6b 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb5b5', endColorstr='#3f4c6b',GradientType=1 );-webkit-background-clip: text;

    -webkit-text-fill-color: transparent; }

    </style>

<div class="gradientInBackground">Gradient in background</div>

<div class="textMain">Gradient Color in Text</div>

<div class="textwithFontIcon"><i class="far fa-address-book"></i> Gradient Color Font icons</div>

<div class="mainTextRadial"><i class="far fa-address-book"></i> Gradient Color with Font icons</div>

How to use gradient CSS with an image?

We can use CSS gradient with the image as we using multiple background images as this code:

.imageWithGradient { background: #0bf;

    background: url(../images/anyImage.png) no-repeat right 20px, -moz-linear-gradient(left,  #0bf 50%, #0b6 50%);

    background: url(../images/anyImage.png) no-repeat right 20px, -webkit-linear-gradient(left,  #0bf 50%,#0b6 50%);

    background: url(../images/anyImage.png) no-repeat right 20px, linear-gradient(to right,  #0bf 50%,#0b6 50%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0bf', endColorstr='#0b6',GradientType=1 );

     }