CSS Advanced Text Effects


Creating text effects in CSS involves using a variety of properties to enhance the appearance and behavior of text on a web page. Here are so1me popular text effects along with examples:

1. Text Shadow
Adds shadow to text to give it a three-dimensional effect.

text-shadow: horizontal-offset vertical-offset blur-radius color;

  • horizontal-offset: Required. Moves the shadow left (negative) or right (positive).
  • vertical-offset: Required. Moves the shadow up (negative) or down (positive).
  • blur-radius: Optional. Controls the blur effect (default is 0 for no blur).
  • color: Optional. Sets the shadow color.
For example, 


text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

This example creates a shadow:

  • 3 pixels to the right.
  • 3 pixels downward.
  • With a blur radius of 5 pixels.
  • Colored black with 40% opacity.


2. Text Stroke
Uses the -webkit-text-stroke property to create an outline around text. This property is primarily supported in WebKit browsers.

-webkit-text-stroke: width color;

width:  Specifies the thickness of the stroke.
color: Defines the color of the stroke.  

For example,

-webkit-text-stroke: 1px black;

This example adds a 1-pixel thick black outline around the text, making it more distinct.


3. Gradient Text
Uses a background gradient with -webkit-background-clip and color: transparent to create a gradient effect on text.

linear-gradient(direction, color-stop1, color-stop2,...);

  • direction (optional): Sets the gradient’s direction (e.g., to right, 45deg).
  • color-stops: Defines the colors in the gradient.

 .background: linear-gradient(to right, #ff7e5f, #feb47b);

This example applies a horizontal gradient to the background in right direction from #ff7e5f to #feb47b 


4. Animated Text
Uses the CSS animation to create the text animation

For example,

@keyframes colorChange {    /*This defines the animation named colorChange.*/
    0% { color: red; } /* At the start (0%), the text color is red. */
    50% { color: blue; } /*  At the halfway point (50%), the text color changes to blue. */
    100% { color: red; } /* At the end (100%), the text color returns to red. */
}

.animated-text {
    animation: colorChange 2s infinite;
}
/* colorChange is the animation name, 2s is the duration, and infinite makes it repeat indefinitely */


5. Text with Glow
Creates a glowing effect using text-shadow.
.text-glow {
color: #fff;
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 120px #0f0, 0 0 200px #0f0;
}


6. 3D Text
Uses text-shadow to create a 3D effect.
.text-3d {
font-size: 50px;
color: #333;
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa, 4px 4px 0 #999, 5px 5px 0 #888, 6px 6px 0 #777, 7px 7px 0 #666, 8px 8px 0 #555, 9px 9px 0 #444, 10px 10px 0 #333;
}

text-shadow applies multiple shadows to the text
to create a layered, depth effect. Here’s a breakdown of what each part does:

  • 1px 1px 0 #ccc:
    • 1px:
      Horizontal offset of the shadow.
    • 1px:
      Vertical offset of the shadow.
    • 0: Blur
      radius, meaning the shadow will be sharp, not blurred.
    • #ccc:
      Color of the shadow.
  • 2px 2px 0 #bbb: Moves the shadow 2 pixels to the right and 2 pixels
    down with a sharp edge, in a slightly darker color (#bbb).
  • 3px 3px 0 #aaa: Moves the shadow 3 pixels to the right and 3 pixels
    down, with a darker color (#aaa).
  • 4px 4px 0 #999: Moves the shadow 4 pixels to the right and 4 pixels
    down, with an even darker color (#999).
  • 5px 5px 0 #888: Moves the shadow 5 pixels to the right and 5 pixels
    down, with a darker color (#888).
  • 6px 6px 0 #777: Moves the shadow 6 pixels to the right and 6 pixels
    down, with a darker color (#777).
  • 7px 7px 0 #666: Moves the shadow 7 pixels to the right and 7 pixels
    down, with a darker color (#666).
  • 8px 8px 0 #555: Moves the shadow 8 pixels to the right and 8 pixels
    down, with a darker color (#555).
  • 9px 9px 0 #444: Moves the shadow 9 pixels to the right and 9 pixels
    down, with a darker color (#444).
  • 10px 10px 0 #333: Moves the shadow 10 pixels to the right and 10 pixels
    down, with the darkest color (#333).

 

7. Text with Background Clip
Uses background-clip to fill text with a background image.
.text-background-clip {
background: url(‘background.jpg’);
-webkit-background-clip: text;
color: transparent;
}

Fills the text with a background image, making the image visible only within the text while the text color remains transparent.


8. Typing Effect
Simulates a typing effect using CSS animations.
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }
}

.typing-effect {
overflow: hidden;
white-space: nowrap;
border-right: .15em solid black;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

This code creates a typing animation where text appears as if it’s being typed out, with a blinking cursor at the end, mimicking the effect of typing on a computer.

Example to show the Advanced Text effects

<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Scaling Effect on Hover</title>
    <style>
        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        } 

        .text-stroke {
            color: white;
            -webkit-text-stroke: 1px black;
        } 

        .gradient-text {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text
            color: transparent;
        }

        @keyframes colorChange {
            0% { color: red; }
            50% { color: blue; }
            100% { color: red; }
        } 

        .animated-text
            animation: colorChange 2s infinite;
        } 

        .text-glow {
            color: #fff;
            text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 120px #0f0, 0 0 200px #0f0;
        }

        .text-3d {
            font-size: 50px;
            color: #333;
            text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa, 4px 4px 0 #999, 5px 5px 0 #888, 6px 6px 0 #777, 7px 7px 0 #666, 8px 8px 0 #555, 9px 9px 0 #444, 10px 10px 0 #333;
        }

        .text-background-clip {
            background: url(‘background.jpg’);
            -webkit-background-clip: text;
            color: transparent;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

         @keyframes blink-caret {
            from, to { border-color: transparent; }
            25% { border-color: black; }
        } 

        .typing-effect {
            overflow: hidden;
            white-space: nowrap;
            border-right: .15em solid black;
            animation: typing 3.5s steps(100, end), blink-caret .5s step-end infinite;
        }
    </style>
</head>
<body>
    <div class=”text-shadow”>Text Shadow Effect</div>
    <div class=”text-stroke”>Text Stroke Effect</div>
    <div class=”gradient-text”>Gradient Text Effect</div>
    <div class=”animated-text”>Animated Text Effect</div>
    <div class=”text-glow”>Text Glow Effect</div>
    <div class=”text-3d”>3D Text Effect</div>
    <div class=”text-background-clip”>Background Clip Text Effect</div>
    <div class=”typing-effect”>Typing Effect with this text</div>
</body>
</html>

Scaling Effect on Hover
Text Shadow Effect
Text Stroke Effect
Gradient Text Effect
Animated Text Effect
Text Glow Effect
3D Text Effect
Background Clip Text Effect
Typing Effect with this text
Scroll to Top