I will explain the above items.
Read this article to understand how to add shadows to text using CSS.
Table of contents
- You can add shadows to elements with text-shadow
- How to add shadow with text-shadow
- How to add multiple shadows with text-shadow
- How to add shadow to gradient text in CCS
- 3 fashionable shadows using text-shadow
- How to add neon shadows
- How to add shadows to create three-dimensional characters
- A design that expresses letters like a border
- Easily generate shadows with the text-shadow generator
- summary
You can add shadows to elements with text-shadow
text-shadow is a CSS property that adds a shadow to the text specified in an HTML element .
You can adjust the shadow position, color, and degree of blurring in detail, so it is suitable for adding shadows to characters using CSS.
How to write text-shadow is as follows.
The left/right position adjustment moves to the right when the value is positive, and to the left when the value is negative.
The vertical position adjustment moves to the bottom when the value is positive, and to the top when the value is negative.
The color of the shadow is represented by a color code.
How to add shadow with text-shadow
I will explain how to actually add a shadow with CSS text-shadow with sample code.
sample code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">影を追加する</p>
</body>
</html>CSS
.text{
text-shadow: 3px 4px 3px rgb(61 70 70);
font-size: 70px;
}In the above code, text-shadow is specified for the text class to add a shadow with a blur of 3px at 3px to the right and 4px to the bottom.
Execution result
How to add multiple shadows with text-shadow
Multiple text-shadows can be specified by separating them with commas. As an example, the sample code explains how to add two shadows.
sample code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">複数の影を指定</p>
</body>
</html>CSS
.text{
text-shadow: 3px 3px 2px red, -3px 3px 2px blue;
font-size: 70px;
}The code above adds a red shadow at the bottom right 3px and a blue shadow at the bottom left 3px.
Execution result
This time I explained how to add two shadows, but it is also possible to add two or more shadows by connecting them with a comma.
How to add shadow to gradient text in CCS
If you add a shadow with text-shadow to a character with gradation, the shadow will be displayed in front of the character as shown below.
The reason lies in the method of applying a gradation to the characters.
The mechanism for applying gradation to characters is created by first specifying the gradation for the background color, and then clipping the background color with background-clip and specifying it for the characters.
Because the background color appears below the text-shadow, the shadow appears above the text with the background color gradient projected.
To solve the above problem, use the method of adding a gradient character made with a pseudo-element above the character with text-shadow.
I will explain how to use it using sample code.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">グラデーションテスト</p>
</body>
</html>CSS
.text {
position: relative;
font-size: 60px;
text-shadow: 4px 2px 1px #808080;
}
.text::before{
content:"グラデーションテスト";
position: absolute;
color: rgba(0, 0, 0, 0);
background: linear-gradient(to right,
rgb(240, 41, 14) 30%, rgb(245, 167, 23) 30% 50%, rgb(247, 247, 19) 50% 70%, rgb(134, 240, 134) 70% 100%);
-webkit-background-clip: text;/*背景色をテキストの中に切り取って表示するプロパティ*/
text-shadow: none;
}Add a shadow with text-shadow to the text class and create a gradation character with the pseudo element before.
For the pseudo-element, specify the “gradient test”, which is the text that casts the shadow, as the value of the content property.
Use “position: absolute;” to set it so that it overlaps the characters of the text class. A gradation is specified with the linear-gradient function for the background color.
The gradation specified for the background is clipped with “-webkit-background-clip: text;” and reflected in the text.
You can add a shadow to a gradation text by creating two texts with a shadow added and a text with a gradation added in the above flow and combining them.
Execution result
3 fashionable shadows using text-shadow
Here are three ways to express fancy shadows that can be implemented using text-shadow.
How to add neon shadows
This is a method of expressing colors around white letters, like a neon sign.
It can be implemented by specifying the text color as white and specifying multiple colors that you want to specify for coloring with tex-shadow.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">影を追加する</p>
</body>
</html>CSS
.text{
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #71F6AB,
0 0 40px #71F6AB,
0 0 50px #71F6AB,
0 0 60px #71F6AB,
0 0 70px #71F6AB;
font-size: 60px;
color: #ffffff;
}text-shadow creates a fluorescent-like blur by adding more white shadow around white text.
A fluorescent color is specified by specifying a green color code (#71F6AB) in the range of 30px to 70px around the text.
How to add shadows to create three-dimensional characters
I will explain how to create characters with a three-dimensional effect using text-shadow.
To create a three-dimensional effect, add text-shadow while shifting it to the lower right by 1px, and finally add a black shadow with a blur .
sample code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">立体感のある影を追加する</p>
</body>
</html>CSS
.text {
color: #ffffff;
text-shadow:
0 1px #bbb,
1px 2px #bbb,
2px 3px #bbb,
3px 4px #bbb,
4px 5px #bbb,
5px 10px 8px #000000;
font-size: 70px;
}It is also possible to express three-dimensional characters that stand out from the bottom as shown below by setting the position where the shadow is added with text-shadow only vertically.
CSS
.text {
color: #ffffff;
text-shadow:
0 1px #bbb,
0 2px #bbb,
0 3px #bbb,
0 4px #bbb,
0 5px #bbb,
0 6px #bbb,
0 7px #bbb,
0 8px #bbb,
0 9px #bbb,
0 10px #bbb,
0 10px 8px #000000;
font-size: 70px;
}Execution result
A design that expresses letters like a border
You can use box-shadow to add a shadow around the text and give the text the same color as the background to create a framed design.
sample code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="./css/test.css">
<title>タイトル</title>
</head>
<body>
<p class="text">影を使た縁取りデザイン</p>
</body>
</html>CSS
First, specify the same white as the background color for the characters with the text class so that the characters cannot be seen.
Next, text-shadow adds solid shadows on the top, bottom, left, and right to make the text appear as if it were bordered .
Easily generate shadows with the text-shadow generator
“I want to add shadows to text, but the shadows don’t turn out
as I expected.”
The text-shadow generator is the best choice for those who think like above.
The text-shadow generator is a tool that has a numerical input field and a shadow preview screen to add shadows to characters, and you can intuitively generate shadows.
You can specify the horizontal and vertical position and blurring of the shadow simply by entering numbers in the input fields.
Color specification is convenient because it is converted into a color code and reflected simply by clicking the color you want to specify from the color palette. Since the code of the entered content is automatically generated, you can implement the shadow just by copying and pasting.
In the “PREVIEW SETTING” field at the bottom of the tool, you can specify the size and color of the text displayed as a preview, and the background color.
You can create shadows by assuming various environments, so please try using it!
summary
This time, I explained how to add shadows to characters with CSS. How was it?
By using the CSS text-shadow property, you can add shadows to specified text in HTML elements.
When adding a shadow to a gradient text, create a separate element that specifies the shadow and the gradient text, and use the position property to overlap them.
Also, you can use the text-shadow generator to easily generate shadows, so please use it as a reference!
