CSS3 combined with your imagination can result in an ocean of beautiful and unique effects. Creative experimentation with web typography is one of the favourites of web developers to make their websites visually impressive. By working on typography, you can now create stunning effects using only CSS.
In this post, 25 results of creative imagination combined with text shadows are shown which you can directly copy and paste. To learn how to create text shadows, go to this link - Tutorial on Text Shadows.
1. Smartly Embossed
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Wanted to create one such shadow of your own? Don't worry, CSS has got you covered.
This is an amazing style which uses a combination of white and black text shadows to give the text the look of being embossed. It uses Ubuntu as a font base with letter spacing of 5 px.
CSS
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
2. Dropping It Elegantly
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
This is a really cool text shadow which makes it appear as if the text is dropping a shadow on a wall. This style requires a combination of many shadows having shades of grey.
CSS
color: #121212;
text-shadow: 0 2px 1px #747474,
-1px 3px 1px #767676,
-2px 5px 1px #787878,
-3px 7px 1px #7a7a7a,
-4px 9px 1px #7f7f7f,
-5px 11px 1px #838383,
-6px 13px 1px #878787,
-7px 15px 1px #8a8a8a,
-8px 17px 1px #8e8e8e,
-9px 19px 1px #949494,
-10px 21px 1px #989898,
-11px 23px 1px #9f9f9f,
-12px 25px 1px #a2a2a2,
-13px 27px 1px #a7a7a7,
-14px 29px 1px #adadad,
-15px 31px 1px #b3b3b3,
-16px 33px 1px #b6b6b6,
-17px 35px 1px #bcbcbc,
-18px 37px 1px #c2c2c2,
-19px 39px 1px #c8c8c8,
-20px 41px 1px #cbcbcb,
-21px 43px 1px #d2d2d2,
-22px 45px 1px #d5d5d5,
-23px 47px 1px #e2e2e2,
-24px 49px 1px #e6e6e6,
-25px 51px 1px #eaeaea,
-26px 53px 1px #efefef;
3. Emerging Out
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
We have got you this cool typography effect using text shadows in which the text is stacked on top of multiple layers. Doesn't the milky white text appear to be emerging out of the black?
CSS
color: #dfdfdf;
text-shadow: 0 2px 2px #dfdfdf,
-2px 5px 1px #b8b8b8,
-4px 8px 0px #979797,
-6px 11px 0px #747474,
-8px 14px 0px #565656,
-10px 17px 0px #343434,
-12px 20px 0px #171717,
-14px 23px 0px #000;
4. Centered Text Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
You can use this style easily in your projects to make your text look elegant without drawing much attention to the shadow beneath it. Experiment with the values given to the text-shadow property to get more shadow variations.
CSS
color: #cfc547;
text-shadow: 3px 0px 7px rgba(81,67,21,0.8),
-3px 0px 7px rgba(81,67,21,0.8),
0px 4px 7px rgba(81,67,21,0.8);
5. Keeping It Short and Simple
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
This is another example created using a single shadow which is almost beneath the text.
CSS
color: #cfc547;
text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
6. Letterpressed
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Doesn't the letters appear carved into that black surface? You can create this style using only two text shadows.
To achieve this effect, make your text a bit darker than the background. After that, give a shadow lighter than the text to its right and a darker shadow to its left.
CSS
color: #0f0f0f;
text-shadow: -1px -1px 3px #020202,
2px 2px 4px #1b1b1b;
7. 3-D Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Make your text look like a 3-D text by using just text shadows. Also notice the smoothness of the text. This is the magic of multiple text shadows.
For this effect, use a combination of text shadows having shades of the text color and set the blur radius to a very small value depending on the size of your text.
CSS
color: #dfdfdf;
text-shadow: 0 2px 2px #dfdfdf,
-2px 5px 1px #cbcbcb,
-4px 8px 1px #979797,
-6px 11px 1px #a2a2a2,
-8px 14px 1px #aeaeae,
-10px 17px 1px #b5b5b5,
-12px 20px 1px #bebebe,
-14px 23px 1px #cecece,
-16px 26px 1px #dbdbdb,
-18px 29px 1px #dfdfdf
8. Green Glare
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
This style is making the colored text look very beautiful with text shadows of the shades of the text color. You can give this effect to any colored text by wisely choosing the color of the shadows. Have a look at its code below.
CSS
color: #67875d;
text-shadow: 0 2px 1px #79a06d,
-1px 3px 1px #82ad75,
-2px 5px 1px #8ebf80;
9. Double Shadowed
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
This cool double shadow effect is created using just two text shadows placed correctly - one white and the other red. You can make different color combinations for the shadows given.
The code used for giving this effect is given below.
CSS
color: #67875d;
text-shadow: 0 2px 1px #79a06d,
-1px 3px 1px #82ad75,
-2px 5px 1px #8ebf80;
10. Smoky Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Smoky shadows are always eye-catching. And here we bring one for you.
To create your own smoky shadow, give a large blur radius to the text-shadow property.
CSS
color: #fff;
text-shadow: 3px 3px 20px #ff99cc,
-2px 1px 30px #ff99cc;
11. Far Flung Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Texts having blurred and distant shadows have been becoming quite popular lately. You can try placing shadows at different distances and orientations and giving them different colors.
CSS
color: #cfc547;
text-shadow: 16px 22px 11px rgba(168,158,32,0.8);
12. Perspective View of 3-D Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
We present you this arresting style which makes it appear as if the 3-D text having solid base is cemented on a white surface and you are viewing it from some angle. This typography will go well with a monochrome layout. So feel free to copy and paste the code shown below.
CSS
color: #000;
text-shadow: 0 2px 3px #747474,
1px 3px 4px #222,
0 8px 3px #474747,
0 11px 4px #747474,
0 14px 4px #565656,
0 17px 4px #343434,
0 20px 4px #171717;
13. Glass Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
If you were searching for a glass shadow effect, then your search ends here. This is created using the transform property by vertically inverting a copy of the text and rotating it about the X-axis. To make the shadow look real, the copy of the text is given some linear gradient.
HTML
<div id="para_div">
<p>My Text</p>
<p id="refl">My Text</p>
</div>
CSS
* {
font-style: italic;
}
#refl {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-moz-transform: rotateX(210deg);
-o-transform: rotateX(210deg);
-webkit-transform: rotateX(210deg);
transform: rotateX(210deg);
perspective: 200px;
-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(20%, transparent), to(rgba(0, 0, 0, 0.4)));
}
14. Layered Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
It's always fun to use multiple shadows. This super cool multi-layered text shadow effect created by correct placement of text shadows is a good example of how creative typography can be.
CSS
#shadow1 { /* for first text */
color: #dfdfdf;
text-shadow: 0 0 2px #dfdfdf,
-4px 5px 0 #b8b8b8,
-7px 11px 0 #747474,
-12px 17px 0 #343434,
-17px 23px 0 #000;
}
#shadow2 { /* for second text */
color: #67875d;
text-shadow: 0 0 2px #67875d,
-4px 5px 0 #5d7755,
-7px 11px 0 #4d6047,
-12px 17px 0 #2e382b,
-17px 23px 0 #000;
}
15. Rainbow Effect
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Giving the colors of rainbow to the different text shadow layers of the previous example resulted in this vibrant colored shadow.
CSS
color: #ff0000;
text-shadow: 0 2px 2px #FF0000,
-2px 5px 0 #ff7f00,
-4px 10px 0 #ffff00,
-8px 15px 0 #00ff00,
-12px 20px 0 #0000ff,
-16px 25px 0 #4b0082,
-20px 30px 0 #9400d3;
16. Glowing Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Here's some yellow text radiating light on a black background. To make the text gleam, give large blur radii to all the shadows declared for this text so that they loose their shape.
The same concept applies for box shadows as well. So, now you can make anything glow using just CSS.
CSS
color: #cfc547;
text-shadow: 10px 10px 25px rgb(81,67,21),
-10px 10px 25px rgb(81,67,21),
-10px -10px 25px rgb(81,67,21),
10px -10px 25px rgb(81,67,21);
17. Blurred Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
You can create blurred text by making your text transparent and dropping its shadow with some blur radius. Interesting, isn't it?
Visit How to Create Blurred Text with CSS to learn different ways to create blurred text.
CSS
color: transparent;
text-shadow: 0 0 8px #316472;
18. Descending Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
In this demo, the shadow is given a large blur radius and is placed lower than the text which gives a floating look to the text.
CSS
color: #cfc547;
text-shadow: 0px 11px 10px rgba(81,67,21,0.8);
19. Beautifully Outlined
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
The bold and colorful outline of this text is created using text shadows. You can use this effect in your designs to make them more attractive and lively.
This outline is created by placing four text shadows of different colors and no blur radius at different positions near to the text.
CSS
color: #cfc547;
text-shadow: -1px 1px 0 #41ba45,
1px 1px 0 #c63d2b,
1px -1px 0 #42afac,
-1px -1px 0 #c6c23f;
20. Outlined Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
Unlike in the previous demo, the outlines of the text in this demo are created by using a combination of text-shadow and -webkit-text-strokeproperties.
CSS
#shadow1 {
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#shadow2 {
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px blue;
}
#shadow3 {
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
21. Funky Double Shadow
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
To create this effect, the text is given two hard shadows with no blur radius. The first shadow is given the background color and is placed near the text, and the second shadow is given the text color and is placed at a distance greater than the first shadow from the text.
CSS
color: #dfdfdf;
text-shadow: 4px 4px 0px #000,
-4px 0 0px #000,
7px 4px 0 #fff;
22. Colored Shadows
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
In this demo, each letter is given a shadow of different color gradient making it look quite impressive.
HTML
<p>
<span id="y">Y</span>
<span id="o">O</span>
<span id="u">U</span
</p>
CSS
color: #dfdfdf;
#y {
text-shadow: 0 1px 2px #75b663,
1px 3px 1px #5ea04b,
2px 5px 1px #5b9c49,
4px 7px 1px #518b41,
6px 9px 1px #477939,
8px 11px 1px #3d6831,
10px 13px 1px #335729,
12px 15px 1px #294521,
14px 17px 1px #1e3418;
}
#o {
text-shadow: 0 1px 2px #9d64c4,
1px 3px 1px #9759c0,
2px 5px 1px #8b46b9,
4px 7px 1px #7d3fa6,
6px 9px 1px #6f3894,
8px 11px 1px #613181,
10px 13px 1px #532a6f,
12px 15px 1px #45235c,
14px 17px 1px #381c4a;
}
#u {
text-shadow: 0 1px 2px #c48564,
1px 3px 1px #c07d59,
2px 5px 1px #b96e46,
4px 7px 1px #a6633f,
6px 9px 1px #945838,
8px 11px 1px #814d31,
10px 13px 1px #6f422a,
12px 15px 1px #5c3723,
14px 17px 1px #4a2c1c;
}
23. The Fallen Text
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
You can actually make your text look fallen using CSS, as done in this demo. Its orientation and position is changed using the transform property and is given different sets of shadows to make it look more natural.
HTML
<p data-text='FALLEN'>FALLEN</p>
CSS
p {
transform: skew(40deg)rotate(-10deg)rotateX(50deg)translate3d(0, 0, 0);
-webkit-perspective: 100px;
perspective: 100px;
}
p::before {
text-shadow: 0 2px 3px #747474,
-3px 3px 1px #222,
-6px 5px 1px #474747,
-9px 7px 1px #747474,
-12px 9px 1px #565656,
-15px 11px 1px #343434,
-22px 15px 1px #171717;
}
p:before,
p:after {
position: absolute;
left: 0;
right: 0;
top: 0;
content: attr(data-text)
}
p:after {
color: #edc;
}
24. Multiple Colored Shadows
See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.
This is another impressive example of multiple text shadow effect created by using two distant shadows of blue and pink color.
CSS
color: #474747;
text-shadow: 20px 10px 0px #ff99cc,
-15px -6px 0px #64a5b7;
25. Knockout Text
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
This is an example of knockout text which allows its background to be visible through it. This effect is created using the text-shadow and mix-blend-modeproperties.
Eager to know more about knockout text? Visit the link How to Create Knockout Text with CSS and learn to create different types of knockout text effects.
HTML
<div id="parent">
<p>Hey there!</p>
</div>
CSS
div {
background: url('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repeat;
padding: 10px;
}
p {
padding: 30px;
mix-blend-mode: multiply;
text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
text-align: center;
}
Conclusion
Text shadows are used extensively in websites and are quite easy to implement. You can directly pick any of the text shadows given in this post and enhance your designs. You can also create your own by giving different colors and other variations taking idea from these shadows. We'll soon be coming up with a post that would discuss the tips and tricks to create the text effects given here.
