• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 473
  • Last Modified:

Test Shadow using CSS

I would like to bring up shadow effect using css. how can i do it?

say, "Sharepoint" text should display as Sharepoint with shadow effect
  • 2
1 Solution
Seven priceFull StackCommented:
Anyway, the CSS needed for Safari is as follows:
.shadow {
      text-shadow: #666666 5px 5px 5px;

       Although Internet Explorer doesnt use the text-shadow CSS property,       it does provide a nice easy way of creating text shadows: the shadow filter.  This       is well documented on other sites, so Ill just give you an example here.  To create       similar shadows to the example above for Safari, youd use the following CSS:   .shadow {
      height: 1em;
      filter: Shadow(Color=#666666,       

Shadows in Mozilla
Heres where things start getting meaty. Since the Gecko based browsers do not know about the previous two methods of creating shadows, we need to create our shadows in some third way.
There are various ways that we could create the text shadows in the Gecko browsers. You could, for example, make use of your favourite image replacement technique to replace the text to be shadowed with an image of some shadowed text. Thats a fine technique, but not the one that I chose. What I chose to do was create a piece of shadow text using the :before pseudo-element.
.shadow {
  line-height: 2em;
  white-space: nowrap;
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
#shadow_header:before { content: 'In shadow'; }

Open in new window

Seven priceFull StackCommented:
I know thats my site.
chikku2003Author Commented:
thanks. for the nice pointer
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now