Home/ Questions/Q 8424037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T03:52:55+00:00

I am trying to apply pure CSS3 Gradients (no images, etc.) on some text

  • 0

I am trying to apply pure CSS3 Gradients (no images, etc.) on some text but the text remains un-changed.

My current code is:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Text Gradients</title>
    <style>
    /* The gradient class */
    .gradient {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
    }
    </style>
</head>
<body>
     <!--The text with the gradient-->
     <h1 class="gradient"> Hello World </h1>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was able to produce gradient text in Chrome using:

    h1 {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    • 0