Transparent Text Effects Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Transparent Text Effects</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="box"> <h1>Transparent Text Effects</h1> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .box { height: 100vh; background: url(6.png); background-size: cover; background-repeat: no-repeat; } h1 { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; text-align: center; font-size: 10em; color: white; text-transform: uppercase; text-shadow: 0 5px 10px rgba(0,0,0,1); mix-blend-mode: overlay; box-shadow: 0 5px 10px rgba(0,0,0,1); background: rgba(0,0,0,0.5); }
