DEV Community

Cover image for Glassmorphism Login Form using only HTML & CSS

Glassmorphism Login Form using only HTML & CSS

Shantanu Jana on September 14, 2021

In this article, I am going to show you how to create Glassmorphism Login Form using HTML and CSS code. You can convert any simple design to a Gl...
Collapse
 
hakimio profile image
Tomas Rimkus

It's unfortunate that backdrop-filter is not supported in Firefox.

Collapse
 
vinzcelavi profile image
Vincent Bianciotto

You might handle the blur with a pseudo element in absolute and a filter: blur (10px) applied to it !

Collapse
 
durindo profile image
Durindo

I have it enabled through about:config, I hope they enable it by default soon, but I read that it is only supported by the new rendering engine, hence the delay...

Collapse
 
sangwajesly profile image
Sangwa Jesly

This is incredible ❤️❣️😍

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

backdrop-filter go BRRRRRRR

Collapse
 
damienpirsy profile image
Matteo Vignoli • Edited

The glass login is really neat, but might I suggest some rework on your website too? It looks a bit crude and unpolished - not at par with the level of design skills you showed in this tutorial. Unfortunately the website is a bigger window to your work than this piece on Dev.to, so go make something really cool! 😎

Collapse
 
billraymond profile image
Bill Raymond

I think the website is great and liked the article, which is really why we are here.

Collapse
 
yosracodes profile image
Yosra

this is so pretty, I love it!

Collapse
 
devpjmb profile image
Pablo Marcano

Amazing

Collapse
 
shobhit055555 profile image
Shobhit thakur • Edited

Wow. glassmorphism login
Hey Shantanu...I want to offer you something.
Can I get your contact details and email Id?
Or mail me at joinkhoka@gmail.com
Sincerely,
Shobhit thakur.

Collapse
 
shantanu_jana profile image
Shantanu Jana