Create CSS text shadow: 4 online demos
The text shadow property in CSS
The text-shadow property, as the name shows, is used to give shadows in the text of the web pages. Normally, you will use text shadows in headings or any other text to make it prominent. You may also add animation based on CSS to the shadows to even stand it out more. I will show you demos of using shadows in this tutorial, so keep reading.
You may also add animation based on CSS to the shadows to even stand it out more. I will show you demos of using shadows in this tutorial, so keep reading.
How to use CSS text-shadow property?
The simple syntax to use the text-shadow property is:
text-shadow: horizontal-shadow vertical-shadow blur color;
Where the horizontal and vertical shadow values are required while blur and color are optional.
A demo of text-shadow property
In this demo, the text-shadow property is used twice for defining the shadow of text in the div element. For proper text shadow, a few other CSS properties like background color, font-size, font weight etc. are also used. The first set of values in text-shadow applies the shadow on top, have a look:
See online demo and code
The CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.text-shadow-demo { width:auto; background-color: #6B7DE2; color: #e0eff2; font-family: Georgia, Serif; font-weight: 700; font-style: italic; font-size: 80px; text-shadow: -4px 3px 0 #408080, -14px 7px 0 #0a0e27; } |
The markup:
1 2 3 4 5 |
<div class="text-shadow-demo"> Text Shadow demo </div> |
Style number 2 for text-shadow
In this demo, the CSS shadow property is used many times for creating the shadow. That way, you may provide different colors at different points, have a look:
See online demo and code
The CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.text-shadow-demo2 { color: #376F6F; font-family: Arial, Serif; font-weight: 700; font-style: italic; font-size: 80px; text-shadow: 0 1px #00BFBF,-1px 0 #98B5B8,-1px 2px #00BFBF,-2px 1px #98B5B8,-2px 3px #00BFBF,-3px 2px #98B5B8,-3px 4px #00BFBF,-4px 3px #98B5B8, -4px 5px #00BFBF,-5px 4px #98B5B8,-5px 6px #00BFBF,-6px 5px #98B5B8, -6px 7px #00BFBF,-7px 6px #98B5B8,-7px 8px #00BFBF,-8px 7px #98B5B8; } |
Style number 3 of shadow effect
See this shadow effect where text looks broken or in dashed way by using the white color for the color property and different colors for shadow property:
See online demo and code
The CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.text-shadow-demo3 { font-size:60px; font-family: verdana; letter-spacing: .18em; color:#fff; text-shadow: 0.45rem -0.45rem #B41039, -0.45rem -0.45rem #F3819D, 0 0.5rem rgba(255, 88, 9, 0.75); } |
Text shadow style number 4 using RGB
In this example, the RGB color codes are used in the shadow CSS property. See the code and output by clicking the image or link below:
See online demo and code
Get the complete code from the demo page.