Frosted Glass Effect CSS Tutorial

by | Jun 10, 2021 | 0 comments

Frosted Glass Effect CSS Tutorial

by | Jun 10, 2021 | CSS Tips and Tricks | 0 comments



In this video I show how easy you can realize a Frosted Glass effect with CSS.
The Frosted Glass effect is very popular right now. You might already seen it from Apple and Microsoft.

You can find the source code here:

I found the picture “Light Trails on City Street at Night” by Steven Arenas on Pexels:
https://www.pexels.com/photo/architecture-blur-bridge-buildings-314380/

Attribution for the music I’ve used:
Accralate – The Dark Contenent von Kevin MacLeod ist unter der Lizenz Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) lizenziert.
Quelle: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100341
Interpret: http://incompetech.com/

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>