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.


Source + Demo

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 Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!