Create Gradient Text With jQuery And CSS - GradientLetter
File Size: | 23.3 KB |
---|---|
Views Total: | 994 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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="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.