DEV Community

muneebejazz
muneebejazz

Posted on

Create beautiful gradient text in CSS with three lines of code!

#html #css #uiweekly #webdev

In this post I will walk you through about creating gradient text in css.

Image description

You can easily add gradient to your text by adding two properties in css to the element.

h1 { background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
Enter fullscreen mode Exit fullscreen mode

-webkit-background-clip:text , and -webkit-text-fill-color:transparent properties are must to add graident to your text.

Full Code 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Text Gradient</title> <meta name="description" content="How to make gradient text."> <style> body { background-color:black; } .text1 { font-family:'Poppins'; font-size:192px; margin:100px; background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } </style> </head> <body> <h1 class="text1">Hello</h1> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)