DekGenius.com
CSS
css gradient text
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text color as gradient css
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
text-color gradient css
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#f3ec78, #af4261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Adding gradient to text color
h1 {
background: linear-gradient(
270.97deg,
#FFE580 -21.36%,
#FF7571 -2.45%,
#EA5DAD 26.84%,
#C2A0FD 64.15%,
#3BF0E4 108.29%,
#B2F4B6 159.03% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text gradient css3
h1 {
font-size: 72px;
background-image: linear-gradient(
110deg,
#463f64,
#463f64,
#e2285c
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
gradient text color css
h4 {
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
CSS text gradient
h1 {
color: #524a48;
background: linear-gradient(to right, rgba(255,239,223, 0) 0%, rgba(255,239,223, 1));
opacity: 40%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Gradient text
.gradient-text {
display:inline-block;
background: black;
background: linear-gradient(135deg,red 50%,blue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text gradient in css
h1{
font-size: 72px;
background: -webkit-linear-gradient(rgb(55, 120, 204), rgb(112, 235, 88));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
css gradient text
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#f3ec78, #af4261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
gradient text
selector h2 {
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
-webkit-background-clip: text;
display: inline-block;
padding: 14px;
-webkit-text-fill-color: #00000000;
font-family: 'Stay Out Regular';
}
Color gradient for text
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
css gradient text
/* add a grient to you text for all browsers */
.gradient-text {
background: -webkit-linear-gradient(#3b82f6, #a855f7); /* <-- create background gradient. */
-webkit-background-clip: text; /* <-- have the gradient clip to the text. */
-webkit-text-fill-color: transparent; /* <-- make the text fill transeparent. */
}
how to add gradient color to text
/*create the gradient*/
background-image: var(--buttonBg);// any color you want
/* Set the background size and repeat Properties */
background-size: 100%;
background-repeat: repeat;
/* Use the text as a mask for the background */
/* Theis will show the gradient as a text color rather element bg*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color:transparent;
© 2022 Copyright:
DekGenius.com