How to add effects to text

Adding effects to text can make your web pages more engaging and visually appealing. There are several ways to enhance your text with various effects using simple CSS techniques. In this article, we'll explore a few methods to add text effects with easy-to-follow examples.

Text Shadow

A simple text shadow can be added using CSS to create a subtle depth effect.

The text-shadow property adds a shadow effect to the text with specified horizontal and vertical offsets, blur radius, and color.

        
            
          <h2 style="text-shadow: 2px 2px 4px #2f2f;">Text Shadow Example</h2>
          
        
    

Gradient Text

Adding a gradient effect to text using CSS can make it more vibrant and colorful.

The .gradient-text class uses a linear gradient background and clips it to the text, making the gradient fill the text.

        
            
          <h2 class="text-gradient">Gradient Text Example</h2>
          
        
    

        
            
              .text-gradient {
              background: linear-gradient(to right, #064F9Cb, #00FB95);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              }
              
        
    

Typing Effect

For a typing effect, custom CSS can be used without the need for JavaScript.

The .typing class uses CSS animations typing and blink-caret to create a typing effect, where text appears one character at a time.

        
            
          <h2 class="typing">Typing Effect Example</h2>
          
        
    

        
            
              .typing {
              font-family: monospace;
              overflow: hidden;
              border-right: .15em solid orange;
              white-space: nowrap;
              margin: 0 auto;
              letter-spacing: .15em;
              animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
              }

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

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