DEV Community

Nikhil Chandra Roy
Nikhil Chandra Roy

Posted on

Easy way to make text gradient color css

#html #css #background

I was browsing a website and got the point to make a text gradient color, it's just a simple post.

for HTML text

<h1> Hello World </h1>
Enter fullscreen mode Exit fullscreen mode

and CSS

h1{
  background: linear-gradient(red 30%, green, blue) center/cover no-repeat;
  color: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

2 new css property is

-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
Enter fullscreen mode Exit fullscreen mode

Thanks.

Top comments (0)

Read next

jsha profile image

Grid Basics. Track sizes

Julia Shlykova -

softheartengineer profile image

Mastering CSS @property Binding: A Guide for Web Developers

Soft Heart Engineer -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

paul_freeman profile image

It's Spooktober 🎃. Here are top 15 Google fonts to make your website spooky 👻

Paul -