Create Gradient Text With jQuery And CSS - GradientLetter

File Size: 23.3 KB
Views Total: 982
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="" 
<script src="js/GradientLetter.js"></script>

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

<h1 class="gradientLetter">

3. Apply your own CSS gradients to the text:

<h1 class="gradientLetter example">
.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.