text gradient color

In this example below you will see how to do a text gradient color with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by clarenswd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright clarenswd ©
  • HTML
  • CSS
  • JavaScript
    <div class="grad">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, iure minima similique iusto doloribus et laudantium provident beatae, repellat perferendis praesentium, neque at. Sequi velit, odio laboriosam cumque sapiente aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, adipisci deleniti veniam iste similique officia eligendi, tempora molestias inventore reprehenderit odio aperiam neque modi blanditiis iure, deserunt architecto minima. Voluptatibus. ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur amet recusandae adipisci vel commodi veritatis odio non est eveniet, incidunt delectus reiciendis cumque vitae obcaecati, quisquam modi velit quis itaque minus. Officiis, rem consectetur nihil! Doloribus pariatur quibusdam tempora vel consequuntur, iusto, soluta odit perspiciatis sapiente nam minus corporis!</p>
</div>

/*Downloaded from https://www.codeseek.co/clarenswd/text-gradient-color-QpMzMb */
    @import url('https://fonts.googleapis.com/css?family=Griffy');

.grad{
  font-family: 'Griffy', cursive;
  width: 600px;
  overflow: hidden;
  margin:0 auto;
  line-height: 1.6;
  text-align: center;
  font-size: 18px;
  position:relative;
 

  
  &:before{
    content: "";
    background: linear-gradient(180deg,#8E8EB7,#80D1E5);
    mix-blend-mode: screen;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
  }
  
}



/*Downloaded from https://www.codeseek.co/clarenswd/text-gradient-color-QpMzMb */
    

Comments