CSS3 Text with Shadow

Create text shadow with CSS3 text-shadow property

Creative CSS

Designing with CSS – Text Shadow

CSS3 gives you a simple text shadow with text-shadow property. However, this feature is not new in CSS3; it was originally proposed in CSS2.

This property produces text with a shadow [n]px left or right and above or below of the text, which blurs for [n]px. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. Text shadows may also be used with the ::first-letter and ::first-line pseudo-elements.

Note: The usage of this property is discouraged as much better filter effects are available in SVG.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In the previous article I illustrated generation of code for box shadow using box-shadow property of CSS3 with the help of this tool.

In this article I shall illustrate generation of code for text shadow using text-shadow property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

Text Shadow

Your Code:

text-shadow:2px 2px 1px #d6132d;
filter:dropshadow(color=#d6132d, offx=2, offy=2); 

Browser Compatibility:

Firefox 3.5+ Chrome 4.0+ Safari 4.0+ Opera 9.6+

Example of Text with Shadow

This example uses the CSS3 text-shadow property and currently it will not work in all browsers.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.textshadow {text-shadow:2px 2px 1px #d6132d;filter:dropshadow(color=#d6132d, offx=2, offy=2);}


<div class="box corner textshadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 


CSS3 Box with Text Shadow Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Browser Support
The text shadow works in Firefox 3.1(pre-Alpha), Chrome, Webkit (from Safari 3+), Opera 9.5, Konqueror or iCab.

CSS3 Generator
W3C CSS3 Text Module
This document presents a set of text formatting properties for CSS3. Many of these properties already existed in CSS2. Many of the new properties have been added to address basic requirements in international text layout, particularly for East Asian and bidirectional text.

Text Shadow
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.

Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

Previous Article
Next Article
CSS3 Box with Shadow
Create box shadow with CSS3 box-shadow property
CSS3 Box with Multiple Columns
Create multiple columns with CSS3 column-count and column-gap properties
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-lR | Thanks for visiting!

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.