- h2.emboss3{
- background:#6d6d6d; /*same as font colour*/
- font-family: 'Atomic Age', cursive; /*Atomic Age is from Google Fonts http://www.google.com/webfonts/specimen/Atomic+Age*/
- color:#6d6d6d; /*same as background colour*/
- font-size:4em;
- letter-spacing:0.05em;
- text-transform:uppercase;
- text-shadow: 1px 1px #fff, -1px -1px #3d3d3d; two shadows, one in white offset to the right and bottom, the second in a dark grey offset to the left and top - you should however adjust the colour depending on the background and font colour*/
- }
CSS3 Demos - text-shadow
Using text-shadow you now achieve Photoshop style effects on your website text without having to resort to image replacement techniques. Please note that text-shadow does not work in Internet Explorer 9 or earlier, it should be supported in IE10.
Basic Syntax
Text shadow has 4 values: x-offset, y-offset, blur and color, with x-offset and y-offset required values, blur and color optional.
text-shadow: [x-offset] [y-offset] [blur] [color];
x-offset, y-offset and blur can be defined in px or ems. Color can be defined in hex or rgba.
Positioning
Positive x-offset = to the right of the text
Positive y-offset = below the text
Negative x-offset = to the left of the text
Negative y-offset = above the text
Usage
text-shadow: 2px 2px 10px #000 - produces a black shadow offset 2px right, 2px below with a blur of 10px
text-shadow: -1px 0 5px rgba(0, 0, 0, 0.75); produces a dark grey shadow 1px offset to the left
Examples and Code
Basic Shadows | Embossed Effect | Raised & Letterpress | Offset Shadows | Neon Glow | Subtle Glow | Stroke Effect | 3D Text
DEMO 1 - Basic Text Shadows
0 5px 5px #7d7d7d
5px 5px 10px #919191
-5px 15px 0 #919191
0 0 5px rgba(0,0,0,.55)
DEMO 2 - Embossed Text
Use text shadows to create an embossed effect
Embossed Heading
Embossed effect - light text on a dark background
- p.emboss1{
- background:#57758a;
- font-size:1.4em;
- color:#fff;
- text-shadow: 0px -1px 0px #303030;
- }
Embossed text - dark text on a light background
- p.emboss2{
- background:#b8b8b8;
- font-size:1.4em;
- color:#2e2e2e;
- text-shadow: 0px 1px 0px #ebebeb;
- }
DEMO 3 - Raised & Letterpress Effect Demos
This text is raised
- #content p.raised{
- color: #fff;
- background: #666;
- font-size:1.8em;
- font-weight:bold;
- text-shadow: 0px 1px 1px #000;
- }
Letterpress Effect
- p.letterpress{
- color: #222;
- background:#414141;
- font-size:3.2em;
- text-shadow: 0px 2px 1px #555;
- }
DEMO 4 - Offset Shadow Demo
Use two text shadows to give an offset effect. The first shadow should be the same colour as the container background, the second the same colour as the text.
Offset Shadow
- h2.offset{
- background:#e4e4c7;
- padding:10px 10px 20px 10px; /*leave enough padding to accommodate the shadow*/
- font-size:4.2em;
- letter-spacing:.2em;
- font-weight:bold;
- color:#526972;
- /*use two shadows, the first the colour of the background, the second the same colour as the text*/
text-shadow: 4px 4px 0px #e4e4c7, 6px 6px 0px #526972; - }
DEMO 5 - Neon Glow
You can use text-shadow to give headings a bright neon glow effect
Neon Glow
- h4.neon{
- background:#000;
- color:#fff;
- /*Use shadows to slowly build up the glow. The first shadow should be the colour of the text. Subsequent shadows are the colour you want the glow to be, all with no x or y offset and with increasing amounts of blur (the number of shadows you use depends on how big you want the glow to be).*/
- text-shadow:0 0 10px #fff, 0 0 20px #00d2ff, 0 0 30px #00d2ff, 0 0 40px #00d2ff, 0 0 50px #00d2ff, 0 0 60px #00d2ff, 0 0 70px #00d2ff;
- }
Subtle Glow
This time the text has a more subtle glow.
give text a subtle glow
- p.subtleglow {
- color:#fff;
- /*use two shadows, the first the same colour as the text, the second a darker colour (in this case white and yellow). Both have no x or y offset, the blur you apply to the shadow will determine how big the glow effect is*/
- text-shadow:0 0 30px #fff, 0 0 70px #ffff00;
- }
Stroke/Outline Effect Demo
Stroke Effect
- h4.stroke{
- background:#fff; /*same as the text colour*/
- color:#fff; /*same as the background colour*/
- /*Use multiple shadows, all the same colour with no x or y offset and 1px blur*/
- text-shadow:0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303;
- }
Stroke With Drop Shadow
- h4.stroke2{
- background:#fff; /*same as the text colour*/
- color:#fff; /*same as the background colour*/
- /*Again use multiple shadows, all the same colour with no x or y offset and 1px blur, but this time add an additional shadow with a slight offset and a blur in a dark grey colour*/
- text-shadow:0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 2px 5px #7d7d7d;
- }
Webkit Stroke Effect
NB. Only works in Webkit browsers. In Opera, Firefox and IE you'll just see solid red text
- h4.webkit-stroke{
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: #dd0303;
- color: #dd0303; /*non-webkit browsers will simply show red text*/
- -webkit-text-fill-color: #fff; /*will override the text color in webkit browsers*/
- }
3D Text Demo
Use multiple shadows to create a 3D effect.
3D Text
- h2.three {
- background:#ca4b29;
- font-family: 'Chewy', cursive; /*Chewy is available at Google Webfonts http://www.google.com/webfonts/specimen/Chewy*/
- color: #fff;
- /*apply shadows of increasing darkness (in this case, because the text is white, I started with very pale grey) and offset until you get the effect you desire*/
- text-shadow:0px 0px 0 rgb(218,218,218), -1px 0px 0 rgb(203,203,203), -2px 0px 0 rgb(187,187,187), -3px 0px 0 rgb(172,172,172), -4px 0px 0 rgb(156,156,156), -5px 0px 0 rgb(140,140,140), -6px 0px 5px rgba(0,0,0,0.5), -6px 0px 1px rgba(0,0,0,0.5);
- }
Browser Support and prefixes
Support
- Opera -- full support since version 9.5
- Firefox -- full support since version 3.5
- Chrome -- full support since version 4.0
- Safari -- full support since version 4.0
- Internet Explorer 9 and earlier -- no support