css linear-gradient text gradient

You may have some knowledge about css gradients, such as linear-gradient, radial-gradient. But I haven't encountered a suitable usage scenario. This article will talk about an example of text color gradient , which is a very elegant use case of linear-gradient.

First look at the effect

paste the code

Page structure:

 <h1 class="article-header--title">A Deep CSS Dive Into Radial And Conic Gradients</h1>

css style:

 body {
  background-color: #0e2730;
}
:root {
    --rainbow-gradient: linear-gradient(-90deg,#adfbda 0,#35c3ff 30%,#fda399 50%,#76d880 70%,#ebf38b 90%,#adfbda 100%);
}
.article-header--title {
  background-image: var(--rainbow-gradient,#fff);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow(0 0 2rem #000);
  text-shadow: none!important;
}

Online demo address

analyze

The key part is that linear-gradient is used in background-image, and background-clip: text is required.

The article was first published on IICCOM-personal blog "css linear-gradient text gradient"