<h1 class="text-gradient">Text Gradients</h1>
/* 💡 How to create text gradients in CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/tekstovye-gradienty/ */
.text-gradient {
font-size: 5em;
font-weight: bold;
text-align: center;
color: blue;
}
@supports (--css: variables) {
.text-gradient {
background: linear-gradient(to right, blue, red);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
.text-gradient::-moz-selection {
color: white;
background: darkorchid;
}
.text-gradient::selection {
color: white;
background: darkorchid;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.