If you are tired of plain text on your web pages, this tutorial is for you. With just a few lines of CSS code, you can make ordinary text creative. In this guide, we will go through 5 different text effects. Each one is easy to create and will help your text stand out.
HTML:
We will keep the HTML very simple. Imagine just having a span element with your text inside it. Then all the styling and effects will be created using CSS. To make it easy to use, we will go through each effect one by one instead of mixing them.
<span>Text Sample</span>Stylesheet (CSS):
We have broken down each text effect separately instead of putting them together. So it is easy for you to understand. So let's learn about each text effect below.
Milky Text Effect:
Styling Body:
Let us begin with a soft-glowing effect that makes the text look smooth and light.
First, set the page background to a light color. This helps the glow stand out clearly. No need for margins and padding our text effert, just set it to 0.
body {
margin: 0;
padding: 0;
background: #fdf9fd;
}Styling Text:
We will use the transform method to center the milky text. It works whether your text is inline or block.
You can choose any font size or family for this effect. Next, we will add a CSS text-shadow and use CSS text-transform for the uppercase letters. The light color I've given will make the text brighter. This effect will give that milky smooth look.
span {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
text-transform: uppercase;
font-size: 150px;
font-weight: bold;
font-family: sans-serif;
color: #f1ebe5;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
}3D Stroke effect
Adding the background color:
The background works best with a light yellow for Stroke effect.
body {
margin: 0;
padding: 0;
background: #fef3c8;
}Adding the stroke:
Again, use the same centering method for the text. Then add text-shadow to make the text more attractive. We will keep the text color transparent here. Then use the CSS text-transform property to make the text look big. Give a thin outline with -webkit-text-stroke. It works well for hollow text. Finally, to keep the text in the middle of the screen, we will use the transform method as before. Now your stroke effect is ready.
span {
font-size: 150px;
font-weight: bold;
font-family: sans-serif;
color: transparent;
text-shadow: 6px 6px #db2777;
text-transform: uppercase;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #111827;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}Golden Text Effect
Styling Body:
The next effect gives your text a golden glow.
You need a dark background to make the gold color stand out. A dark blue works great here.
body {
margin: 0;
padding: 0;
background: #0b1826;
}Styling Text:
Move on to the main styling. Instead of a shadow, we set a CSS linear gradient property on the text. It starts with a dark brown color, then blends into a golden color, and ends with a light highlight. These blended colors create the impression of a shiny golden color. The text looks like it is reflecting light.
span{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-family: sans-serif;
letter-spacing: 5px;
font-size: 150px;
font-weight: bold;
background-image: linear-gradient(
to right,
#472422 0,
#ce9c4f 22%,
#f6e283 45%,
#faf6bf 50%,
#f6e283 55%,
#ce9c4f 78%,
#472422 100%
);
color:transparent;
-webkit-background-clip:text;
}Glitch Text Effect
Styling Body:
Now, let us create something more digital-looking. The glitch effect makes the text look broken.
A dark background is again a good choice here because it helps the bright shadow stand out more.
body{
padding: 0;
margin: 0;
background-color: #071c5d;
}Styling Text:
After centering the text, give it a white color. The glitch look is created using two shadows in different colors. One sky to the left in a blue color and the other side to the right in a pink color. These two simple shadows create the illusion of text on the screen.
span{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-family: sans-serif;
letter-spacing: 5px;
font-size: 150px;
text-transform: uppercase;
font-weight: bold;
text-shadow: 3px 0 0 #ff00ff, -3px 0 0 #00ffff;
color: white;
}Elegant Text Effect:
Styling Body:
Light colors look good on the background so that the shadows of the text stand out clearly.
body{
padding: 0;
margin: 0;
background-color: #e7e5e4;
}Styling Text:
Here we have increased the text shadow horizontal and vertical values by one, two, three, and four. Here, the horizontal values are kept negative and the vertical values are kept positive. This usually determines which direction the shadow will fall. The shadow colors are kept dark. However, each shadow is given a lighter color than the previous shadow color. It will look like the shadow is blending into the background. Here, we will keep the shadows a little blurry. Only then will you see such a shadow effect on your text.
span{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-family: sans-serif;
letter-spacing: 5px;
font-size: 150px;
text-transform: uppercase;
font-weight: bold;
color: #131313;
text-shadow:
1px -1px 0 #767676,
-1px 2px 1px #737272,
-2px 4px 1px #767474,
-3px 6px 1px #787777,
-4px 8px 1px #7b7a7a,
-5px 10px 1px #7f7d7d,
-6px 12px 1px #828181,
-7px 14px 1px #868585,
-8px 16px 1px #8b8a89,
-9px 18px 1px #8f8e8d,
-10px 20px 1px #949392,
-11px 22px 1px #999897,
-12px 24px 1px #9e9c9c,
-13px 26px 1px #a3a1a1,
-14px 28px 1px #a8a6a6,
-15px 30px 1px #adabab,
-16px 32px 1px #b2b1b0,
-17px 34px 1px #b7b6b5,
-18px 36px 1px #bcbbba,
-19px 38px 1px #c1bfbf,
-20px 40px 1px #c6c4c4,
-21px 42px 1px #cbc9c8,
-22px 44px 1px #cfcdcd,
-23px 46px 1px #d4d2d1,
-24px 48px 1px #d8d6d5,
-25px 50px 1px #dbdad9,
-26px 52px 1px #dfdddc,
-27px 54px 1px #e2e0df,
-28px 56px 1px #e4e3e2;
}The biggest question is, instead of giving so many text shadows, what if we had given just one? It wouldn't have been possible because if you look closely at the image above, you will understand that the shadow is blending into the background.
We explored five different CSS text effects. A bright milky style, a hollow stroke outline, a shiny gold look, a colorful glitch, and a layered, elegant shadow. Each of these effects is based on common CSS properties like shadow, stroke, and gradient.
You can start with these examples. Comment if you had fun testing these techniques.
Post a Comment