Create Gradient Text With jQuery And CSS - GradientLetter

Create Gradient Text With jQuery And CSS - GradientLetter

GradientLetter is a small jQuery plugin to create gradient text that applies CSS Gradients to each letter in the text. jQuery is used to split your text into letters.

1. Load the JavaScript file GradientLetter.js after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="js/GradientLetter.js"></script>

2. Add the CSS class gradientLetter to the desired text.

<h1 class="gradientLetter">
  jQueryScript.Net
</h1>

3. Apply your own CSS gradients to the text:

<h1 class="gradientLetter example">
  jQueryScript.Net
</h1>
.gradientLetter {
  color: #333;
  font-size: 60px;
  background: linear-gradient(-45deg, #cb60b3 0%, #c146a1 50%, #a80077 51%, #3B3B3B 51%, #3B3B3B 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important; 
}
.gradientLetter-span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
}
.example .gradientLetter-span {
  background-image: linear-gradient(135deg, #e6cc3c 49%, #e6cc3c 49%, #d8bc1c 49%, #d8bc1c 100%); 
}

This awesome jQuery plugin is developed by SathoriStudio. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.04.2019
  • Source