Ads Top

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.



<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 );
     }

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.