Hey there, I'm SA!

You can see all the codes (along with many more awesome options) by dates, and category filter in SA Coding Store !

Home CSS HTML CSS Transparent Text Effects- Glass Text Effects

CSS Transparent Text Effects- Glass Text Effects

Satyam Aaditya 7/23/2020 1 Comment CSS , HTML

CSS Transparent Text Effects - Glass Text Effects

HTML Code Here :

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>CSS Transparent Text Effects- Glass Text Effects </title>
</head>
<body>
    <div class="box">
    <h1>Transparent Text Effects.</h1>
</div>
</body>
</html>

CSS Code Here :

body
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.box
{
    height: 100vh;
    background: url(bg.jpg);
    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: #fff;
    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,.5);
}

About SA

Iғ ʏᴏᴜ ᴄᴀɴ ᴅʀᴇᴀᴍ ɪᴛ, ʏᴏᴜ ᴄᴀɴ ᴅᴏ ɪᴛ
__ɮʟօɢɢɛʀ_ωєв ∂єѕιgηєя_ωєв ∂єνєℓσρєя__
*--Ⓖ🅔Ⓔ🅚Ⓨ--*

Hey there, I'm SA!

Technology

CSS Transparent Text Effects- Glass Text Effects

CSS Transparent Text Effects - Glass Text Effects

HTML Code Here :

CSS Code Here :

About SA

Comments

1 Comments:

Archive

Author Info

Video Of Day