A little CSS utility I created based on a text color effect I found while surfing the Stadia Developer Website.
- Swipe the
gradient-textCSS class from the gradient-text.css file.
.gradient-text {
-webkit-background-clip: text;
background-image: -webkit-linear-gradient(107deg, #9b0063, #ff4c1d);
color: gradient-color-at(#9b0063, #ff4c1d);
-webkit-text-fill-color: transparent;
}- Modify the CSS gradient HEX values with whatever colors you wish to be in your gradient and change the angle of the gradient to whatever you prefer.
.gradient-text {
-webkit-background-clip: text;
background-image: -webkit-linear-gradient(ANGLE, HEX CODE 1, HEX CODE 2);
color: gradient-color-at(HEX CODE 1, HEX CODE 2);
-webkit-text-fill-color: transparent;
}- Add the
gradient-textCSS class to<div>elements.
<div class="gradient-text">
Gradient Text Demo
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent