Front-end CSS text shadow text-shadow record

1. Text shadow

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
      
      
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .text {
      
      
            font-size: 60px;
            font-weight: bold;
            text-shadow: 4px 4px 10px #222222;
        }
        
    </style>
</head>

<body>
    <div class="text">
        Hello world
    </div>
</body>

</html>

Effect:

The following code only contains the CSS part

2. Blurred text

        .text {
    
    
            font-size: 60px;
            font-weight: bold;
            text-shadow: 0 0 6px #000;
            color: transparent;
        }

After setting the text shadow and setting the text color to transparent, you can set the text to be blurred.

3. Pixel style text

		.text {
    
    
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px 0px #ddd,
                4px 4px 0px #bbb,
                6px 6px 0px #999,
                8px 8px 0px #777,
                10px 10px 0px #555,
                12px 12px 0px #333,
                14px 14px 0px #111;
            color: #fff;
        }

4. 3D text

        .text {
    
    
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px 2px #ddd,
                4px 4px 2px #bbb,
                6px 6px 2px #999,
                8px 8px 2px #777,
                10px 10px 2px #555,
                12px 12px 2px #333,
                14px 14px 2px #111;
            color: #fff;
            
        }

The difference from the pixel style is that the shadow blur effect is added (0px->2px)

You can put the shadow into a pseudo class, and the font will have a more spatial feel, as follows:

        .text {
    
    
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px 2px #ddd,
                4px 4px 2px #bbb,
                6px 6px 2px #999,
                8px 8px 2px #777,
                10px 10px 2px #555,
                12px 12px 2px #333,
                14px 14px 2px #111;
            color: #fff;
            transform: skew(40deg) rotate(-10deg) rotateX(50deg);

        }

5. Rainbow Trailing

		.text {
    
    
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px 2px #ff0000,
                4px 4px 2px #ff7f00,
                6px 6px 2px #ffff00,
                8px 8px 2px #00ff00,
                10px 10px 2px #00ffff,
                12px 12px 2px #0000ff,
                14px 14px 2px #8b00ff;
            color: #fff;
            /* transform: skew(40deg) rotate(-10deg) rotateX(50deg); */

        }

Just change the color of the shadow

6. Hollow text

        .text {
    
    
            font-size: 60px;
            font-weight: bold;    
            color: transparent;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: #333;
            /* text-shadow: 6px 6px hotpink; */
            
		}

Two steps: one is to make the text transparent and the other is to outline the text

Continuing to shadow the text is to unzip the commented code above to get the following effect.