Adding shadows to text is easy with the CSS text-shadow property!

Text is an essential part of any website.

Without letters, information cannot be conveyed.

Text is the primary means of conveying information to users.

What is required is not only to convey correctly. Communicating effectively is also important.

For this reason, websites use various methods to display text.

Bold it, change its size, draw a border, put a background, and so on.

Text can be shadowed with the CSS text-shadow property .

It is possible to make characters look three-dimensional, make them stand out, and give them an effect that attracts the user’s attention.

This article explains how to use CSS text-shadow. Please use it as a reference.

What is text-shadow

text-shadow is a property that applies a shadow to text. You can express various shadows by setting distance, blur, color, etc.

Specifically, the following four elements can be specified.

The horizontal distance is the specified number of shadows to the right of the text. A negative value indicates to the left.

If specified vertically, the shadow will be displayed under the text by the specified number. If you specify a negative value, it is upward.

The blur radius is the distance to the edge of the blur effect.

You can freely specify the color of the shadow as well as the color of the text.

Writing text-shadow

Let’s actually write the text-shadow.

CSS
p {
text-shadow: 2px 2px 2px #666666;
}

The values ​​are the horizontal distance from the left, the vertical distance, the shadow blur radius, and the shadow color.

In this description, the characters are shaded as follows.

2 pixels to the right and down from the text, 2 pixels blur, and color #666666 (gray).

Negative distance values ​​change the direction of the shadow .

CSS
p {
text-shadow:-2px -2px 2px #666666;
}

It now has a shadow of 2 pixels up and 2 pixels to the left.

Blur does not have a negative designation.

Blur radius and color are optional

The text-shadow can be displayed only by specifying the distance.

CSS
p {
text-shadow: 2px 2px;
}

If there are two numbers, it will automatically be judged as horizontal distance and vertical distance only.

If you don’t specify a blur radius, it will be 0 pixels, giving you a shadow with no blur at all.

If you do not specify a color, it will be the same color as the text.

show multiple shadows

You can specify more than one text-shadow per text.

By specifying multiple, you can display many shadows .

CSS
p {
text-shadow:2px 2px 3px #666666 , -2px -2px 2px #ff0000;
}

Separate the two shadow specifications with a ‘,’.

In this way, gray shadows and red shadows will be displayed side by side.

Overlapping shadows are displayed, but the shadows are not over the characters in any way.

There is no limit to the number of shadows, and 3 or more shadows can be displayed.

CSS
p {
text-shadow:2px 2px 3px #666666 , -2px -2px 2px #ff0000 , 2px -2px 1px #00ff00;
}

Just specify a new value separated by a comma as in the two cases.

Added green shadow.

How to use text-shadow

Here’s a real-life example of using text-shadow.

give a three-dimensional effect

You can give the letters a three-dimensional effect by using non-blurred shadows.

CSS
p {
font-weight:bold; /
text-shadow:1px 1px 0px #999999;
}

I placed the unblurred shadow at 1 pixel position both horizontally and vertically.

Although it is slight, it has a three-dimensional effect.

This image is without text-shadow.

By comparison, you can see that the characters with text-shadow have a three-dimensional effect.

express the glow

Opposite of 3D effect, use blurred shadows.

CSS
p {
text-shadow: 0 0 10px #ffcc00;
}

Alignment is 0 both horizontally and vertically.

With this, if the blur is also 0, the shadow will be completely hidden under the character. I set the blur to 10 in this code.

By blurring the shadow whose starting position is the same as the character, the entire character appears to glow .

It is also recommended to use it in designs with bright text colors on dark backgrounds.

CSS
body {
background: #000000; /
}
p {
color:#ffffff; /
text-shadow: 0 0 5px #fffd4e;
}

Add glow to white characters on a black background.

It will come in handy especially when you want to make the letters stand out in an overall dark design.

However, this may feel thin. There are other ways to make the glow even stronger.

CSS
p {
color:#ffffff; /
text-shadow:
1px 1px 10px #fffd4e,
-1px 1px 10px #fffd4e,
1px -1px 10px #fffd4e,
-1px -1px 10px #fffd4e;
}

I placed four blurry shadows, shifting them little by little.

The four shadows overlap and appear to glow quite strongly.

Characters that appear to float

If the distance between the character body and the shadow is large, the shadow of the character floating in the air will appear to be on the ground.

CSS
p {
text-shadow:0px 15px 3px #666666;
}

0 horizontally and 15 pixels apart vertically only.

By blurring the shadow a little, it looks like there is a distance from the main character.

If the color is too dark, it will become one with the character itself, so be careful.

blurry letters

You can create characters that are all blurry by applying glow.

CSS
p {
color:transparent; /
text-shadow:1px 1px 3px #ff0000;
}

“transparent” is the value that makes the element transparent.

I made the characters transparent with color. It can also be used for background colors and border colors.

The feature of transparent is that it is transparent but still exists.

Differs from “display:none”. The character size remains the same, and margins and padding also exist.

Other styles are unaffected. text-shadow is no exception. The text will be transparent and only the shadow will be visible.

Since only the blurred shadow is visible, the whole character looks blurry.

What happens if you set the blur to 0?

CSS
p {
color:transparent; /
text-shadow:1px 1px 0px #ff0000;
}

In this way, it looks no different from ordinary text.

But this is a shadow. A shadow with a blur of 0 has the same shape as normal text.

border the letters

A technique that draws a line along the outline of the text to make it stand out.

It is often used for images because it can be easily done with graphic software such as photoshop.

Using text-shadow, this can also be achieved with characters.

CSS
p {
color:#ffffff; /
text-shadow:
1px 1px0 #000000,
-1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
1px 0px 0 #000000,
0px 1px 0 #000000,
-1px 0px 0 #000000,
0px -1px 0 #000000;
}

In this way, specify a shadow moved one pixel at a time in eight directions, up, down, left, right, and diagonally. Blur is all 0.

Unblurred shadows shifted by 1 pixel in each direction are connected to form a border.

Characters that appear to overlap

It is an expression that looks like the same characters are piled up.

CSS
p {
font-weight: bold; /
text-shadow:
1px 1px 0 #cccccc,
2px 2px 0 #000000;
}

Change the color of the non-blurred shadows and place them with a 1 pixel offset.

Slight misalignment creates a three-dimensional effect, and it looks like they are stacked in a border shape .

Letters that look like they are standing up

It is similar to overlapping letters and methods.

Shadows without blur shifted by 1 pixel are superimposed.

CSS
p {
font-weight: bold; /
text-shadow:
1px 1px 0 #ff4b2d,
2px 2px 0 #ff4b2d,
3px 3px 0 #ff4b2d,
4px 4px 0 #ff4b2d,
5px 5px 0 #ff4b2d,
6px 6px 0 #ff4b2d;
}

I placed 6 unblurred shadows of the same color, shifted by 1 pixel both vertically and horizontally.

It is much more three-dimensional than a single shadow, giving the impression that it is rising from below.

What happens when you alternate colors, like letters that look overlapping?

CSS
p {
font-weight: bold; /
text-shadow:
1px 1px 0 #cccccc,
2px 2px 0 #000000,
3px 3px 0 #cccccc,
4px 4px 0 #000000,
5px 5px 0 #cccccc,
6px 6px 0 #000000;
}

Three shadows of different colors are placed alternately.

In this way, three-dimensional characters with striped patterns were created.

shadow inside

A property similar to text-shadow is box-shadow.

It is a property that casts a shadow along the frame of the element, and its basic usage is the same as text-shadow, but there are some differences.

One of them is a value called “inset” that casts a shadow inside the element .

text-shadow cannot cast shadows inside characters.

In the first place, if it is a normal non-bold typeface, even if the shadow is added inside, it is almost impossible to distinguish, so it may be said that text-shadow does not have an inset.

However, there are times when it would be useful to have an inner shadow to emphasize the bold text in a headline.

It’s not that text-shadow can’t have an inner shadow. It can be realized depending on the ingenuity, so please remember.

CSS
p {
font-weight: bold; /
color:rgba(0,0,0,.4); /
text-shadow: 1px 1px 2px #eee, 0 0 #000;
}

This specification will result in the following display.

By displaying shadows on the inside, characters can be expressed as if they were carved.

Let’s explain step by step how to do this.

First, the text color must be a transparent color.

The rgba description method determines the color with the three primary colors, red (red), green (green), and blue (blue), and also specifies alpha (transparency).

The numbers separated by “,” are red, green, blue, and transparency from left to right.

“.4” means 40%. Strictly speaking, it is 0.4, but the 0 to the left of the decimal point can be omitted.

The width of the color expression is the same as a 6-digit hexadecimal number, but the main point is that you can specify transparency with rgba.

Hexadecimal color codes do not allow this.

In addition, there is a property called opacity that specifies the transparency of the element, but that affects the entire element, that is, the shadow, so it is not possible to express shadows inside.

CSS
p {
font-weight: bold; /*
color:rgba(0,0,0,.4); /
}

If you specify only the character color with rgba without adding a shadow, it will be as follows.

40% transparency of black, so it’s a light gray.

Next, set only one shadow.

CSS
p {
font-weight: bold;
color:rgba(0,0,0,.4);
text-shadow:0 0 #000;
}

A non-blurred black shadow was placed in the same position as the character body.

The shadow is displayed under the character body, but since the character color is 40% transparent, the color of the shadow is transparent and looks black.

Place a slightly blurred shadow there. Below is the same as the first code.

CSS
p {
font-weight: bold; /
color:rgba(0,0,0,.4); /
text-shadow: 1px 1px 2px #eee, 0 0 #000;
}

This will give the appearance of an inner shadow.

It is a state in which two shadows overlap behind the transparent characters.

Specify a color that is the same as or close to the overall background color for the lightly blurred shadows.

In reality, there are shadows on the outside of the letters, so if the colors are far apart, they will stand out.

It is also important to write the lightly blurred shadows first.

CSS
p {
font-weight: bold;
color:rgba(0,0,0,.4);
text-shadow: 0 0 #000, 1px 1px 2px #eee;
}

If you write the dark shadow first like this, it will not look like a shadow.

The darker shadows overlap the lighter, blurred shadows, resulting in a pitch black look.

Useful generator for text-shadow generation

It is quite difficult to adjust the fine numerical value with CSS and display the shadow as intended.

Generators come in handy in such situations.

You can set the shadow position, blur radius, and color on the browser, and paste the generated code directly into CSS.

Try searching for “text-shadow generator” . You should get many page hits.

summary

The text-shadow property, which adds shadows to characters, enables a variety of expressions by adjusting four values .

Another great feature is that you can set multiple shadows.

It doesn’t just cast shadows. Various ingenuity has been tried, such as lighting and edging.

Even a design that seems impossible without an image can be implemented with text if text-shadow is used well.

It’s not too hard to get a feel for it, as there are generators that generate code easily.

I hope you will be able to use it.