10 jQuery Mouse / Text Shadow Plugins

Share this article

As you may know Text-shadow is predominately a CSS3 property that allows you to display a shadow behind your text. If you are a stylish type of person then you may want to use this text shadow effect on your website and you’re in luck because jQuery can help you! Here are some pretty neat jQuery Mouse/Text Shadow Plugins just for you! Enjoy!

Related Posts:


1. jQuery Fancy Drop Shadow Plugin

A very simple plugin for jQuery that uses the CSS text-shadow and box-shadow feature to change the shadow direction according to the current mouse position.

jQuery Fancy Drop Shadow


2. (Almost) Cross browser text-shadow

Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text.

Cross browser text-shadow

Source + Demo

3. A jQuery Plugin To Create CSS3 Text-Shadows in Internet Explorer

jQuery plugin where you can just apply this to an element and have it automatically do all the work for you while still working in IE6, IE7 & IE8.

CSS3 Text-Shadows In Internet Explorer

Source + Demo

4. Real Shadow: A jQuery Plugin for Creating Realistic Shadows

What it does is it gives an element a shadow that changes its attributes depending on the location of the mouse cursor.

Real Shadow


5. Textgrad : a jQuery text gradient plugin

It contains four functions applicable to a selection : spanize, unspanize, textgrad and textscan. (2022 Update: No Longer Available)


6. Codename Rainbows

This works especially well on big sites or dynamic content where it’d be impractical to create images for every instance.

Codename Rainbows


7. animate-textshadow.js – Animated CSS text shadows with jQuery

Is a simple, lightweight jQuery plugin which lets you animate an element’s text-shadow property, using jQuery’s regular .animate method.


Source + Demo

8. jQuery Shadow Plugin

A jQuery plugin to create drop shadows of various types.

jQuery Shadow


9. NuvuShadow

Text and Box-Shadow Animation jQuery Plugin.



10. jquery-glow

Add the ability to make elements “glow” when you hover over them. For browsers that support the text-shadow CSS property, you can also add a halo.



Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form