How to Do Text Shadows in Chrome

Web designs can add text shadows by modifying the website's CSS file.

Web designers use text shadows to give writing on a Web page more depth and texture. While there are many variations and different effects designers can use, simply adding a text shadow requires only one line of code in the website's CSS file. The major Web browsers all use different standards as to how it renders CSS code for a website. Google's Chrome Web browser, however, generally conforms to Web standards. As such, designers only need to include the basic "text-shadow" CSS code for Chrome to render it properly.

Instructions

1. Open your website's CSS document. If you are using a content management system, such as Drupal or WordPress, you can access your theme source code from the built-in theme editor.

2. Navigate to the code that renders the text you want to have a shadow. For example, if you only want your header text to have shadows, search for the "header" code.

3. Type "text-shadow: Tpx Rpx Bpx Lpx #000;" (without quotes) within the brackets that render the text.

4. Replace "T" with the pixel size you want for the top shadow, "R" with the right pixel size, "B" with the bottom pixel size and "L" with the left pixel size, and replace #000 with the color code for the shadow. For example, if you want your text to have a three-pixel gray shadow, your code should look like this: ".header { text-shadow: 3px 3px 3px 3px #ccc; }".

5. Repeat Step 3 and Step 4 for each text area where you want to have a text shadow.

6. Upload the new CSS to file to your website. If you are using the theme editor in your content management system, simply click the "Save" button.

Tips & Warnings

• Be sure not to delete any important CSS information, such as the font size or color. Type the "text-shadow" code after the final semicolon in that section. For example, the original code for your website's header might read ".header {color: #000; font-size: 2em;}". To add a text shadow, add the code after the "2em;" section: ".header {color: #000; font-size: 2em; text-shadow: 3px 3px 3px 3px #ccc;}".

• Make a backup of your original CSS file before making any changes.

References

• SitePoint Reference: text-shadow (CSS property)