Ajax Loader
×

Nice Shadow Text Effect on Hover

The shadow is created using the text-shadow property where basically two shadows are used (one with 100px blur radius and another with 50px blur radius of color #666 and #000 respectively). These shadows are shown with a nice fading transition and the text color changes from black to white by using transition property on the :hover pseudo class of the h1 tag.

The amazing shadow is due to the fact that when a same shadow is repeated that many times, then the blur softness gets removed and edges of the shadow become clear. So, both shadows create that fringe pattern because of their repetition five times. This effect will look good in all the major browsers that support text-shadow and transition properties.

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Nice Shadow Text Effect on Hover

    CSSDeck G+