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.

See Also:

• Online CSS Gradient Generator

How to use it:

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.