11 examples of CSS text shadows to try on your website

CSS3 allows you to be creative and experiment with your design to create beautiful and unique web pages. One area of ​​design that CSS lets you work with is typography.

You can use the font family and text shadow properties to create simple but remarkable effects. You may already be familiar with basic CSS text shadow applications. However, you can create a wide variety of styles with these properties.

In this article, you will learn an efficient way to create different text shadow effects using HTML and CSS.

Getting started with HTML and CSS

You can copy and paste these code samples to achieve the text shadow effect you prefer. Start by creating a index.html file and a style.css to file. These are the only files you will need to try out the examples, but you will need to modify both files for each example.

index.html









href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>



href="https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>



href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>




href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>




href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>




href="https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>




href="https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stylesheet"
/>


CSS Text Shadow Examples


style.css

body {
text-transform: uppercase;
line-height: 1;
text-align: center;
font-size: 5rem;
display: grid;
gap: 4rem;
}

Now, let’s go over 11 examples of text shadows to try.

VIDEO OF THE DAY MAKEUSE

Related: How to Edit Your Website Text with the CSS Font-Family Property

Mystical

Mystic is a glassy style giving a cool transition effect without using the transform goods. It’s a super simple, yet aesthetic, effect for a bold, growth-oriented website.

Go out

Mystic text shadow effect

Html



Mystic



CSS

body {
background-color: #5e5555;
}
.mystic {
font-family: 'Bowlby One', cursive;
color: rgba(255, 255, 255, 0.596);
text-shadow: 20px 0px 10px rgb(0, 0, 0);
}

monotone

This is a fun text effect using the ‘Monoton’ font. You can play around with the text and shadow color to match your website’s primary colors.

Go out

Monotone text shadow effect

Html



Monoton



CSS

.monoton {
font-family: 'Monoton', cursive;
font-size: 15rem;
color: rgb(255, 0, 0);
opacity: 0.5;
text-shadow: 0px -78px rgb(255, 196, 0);
}

Elastic

It’s a cool style using the “Bungee Shade” font. Combined with a dark background, it produces a raw effect with a sense of suspicion.

Go out

Elastic shadow text shadow effect

Html



Bungee



CSS

body {
background-color: #222;
}
.bungee {
font-family: 'Bungee Shade', cursive;
color: rgb(160, 12, 12);
opacity: 0.9;
text-shadow: -18px 18px 0 rgb(66, 45, 45);
}

Radioactive

You can use this effect for warning or danger signs. He uses the ‘Rampart One’ font.

Go out

Radioactive text shadow effect

Html



Radioactive



CSS

body {
background-color: #27292d;
}
.radioactive {
font-family: 'Rampart One', cursive;
color: rgb(97, 214, 43);
opacity: 0.6;
text-shadow: -18px -18px 20px rgb(87, 255, 9);
}

Sprint

This running text effect uses the ‘Faster One’ font, the text shadow property, and a ::after pseudo-element with the same content as the text. This creates a “doubling” effect.

Go out

Sprint text shadow effect

Html



Sprint



CSS

body {
background-color: #27292d;
}
.sprint {
font-family: 'Faster One', cursive;
font-size: 10rem;
color: rgba(255, 0, 242, 0.322);
text-shadow: -20px -108px 0px rgba(255, 255, 255, 0.445);
letter-spacing: 1rem;
position: relative;
}
.sprint::after {
content: 'sprint';
position: absolute;
top: 215px;
right: 300px;
}

Thorny

This horrible prickly text effect uses the “Eater” font. You can try to shift the text shadow down right instead.

Go out

Stinging shadow effect

Html



Prickly



CSS

.prickly {
font-family: 'Eater', cursive;
text-shadow: -18px -18px 2px #777;
}

Codystar

Text shadow can act as a blurry but visible outline of text. This light effect works wonders with the “Codystar” font.

Go out

Codystar text shadow effect

Html



Codystar



CSS

.codystar {
font-family: 'Codystar', cursive;
font-weight: bold;
color: rgb(55, 58, 255);
text-shadow: 1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255);
}

Kingdom

You can achieve authoritative typography with this shadow effect. He uses the ::before pseudo-element and the transform property of tilting the shadow.

Go out

Shadow Effect of the Realm

Html



Kingdom



CSS

body {
background-color: #5e5555;
}
.kingdom {
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 10rem;
line-height: 1;
text-align: center;
}
.kingdom--shadow::before {
color: #000;
content: attr(data-text);
margin-top: 0.7rem;
position: absolute;
transform: perspective(205px) rotateX(38deg) scale(0.84);
z-index: -1;
}

Encoder

This bright and positive text shadow effect conveys a conscious and motivated website personality. You can add it to your website to produce a simple smokey look.

Go out

Encoder Life Text Shadow

Html




Eat

Sleep

Code

Repeat


CSS

body {
background-color: #5e5555;
}
div {
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 40px;
margin: 0px auto;
font-weight: bold;
line-height: 5.8rem;
text-align: left;
color: rgb(94, 94, 94);
}
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Elegant

If you like minimalism, this text shadow effect is perfect for you. Since it uses a large font size, we have reduced the letter spacing and applied on text shadow property to create this effect.

Exit

Stylish text shadow effect

Html




s
h
r
a
d
d
h
a


CSS

.elegant {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 10rem;
letter-spacing: -1rem;
color: white;
text-shadow: -18px 8px 18px #b4bbbb;
}

Playful

The thin and bold outline makes this text attractive and lively. You can play with the text shadow property without blur ray at different positions. Text shadows apply to all characters, including HTML entities such as . You can use a character entities reference table to explore further.

Exit

Playful shadow effect

Html



Coding is ♥



CSS

.playful {
font-family: 'Baloo Tamma', cursive;
color: #fff;
letter-spacing: 0.2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Keep experimenting with the advanced shadow effects

Text shadows are a simple and effective way to improve your website design and make your website look attractive. You can also experiment with different shadow effects. You can read more about drop shadow effects to continue your CSS journey.


Effects and differences of drop shadows and box shadows
How to create a drop shadow with CSS

CSS box-shadow does not have a monopoly on shadow effects. Learn how and when to use the drop shadow here.

Read more


About the Author

About Jason Jones

Check Also

Should old crows leave the perch for young birds

The target age for a KIT Newstalk radio listener is between 45 and 55 and …