Skip to content

DEV Community

How to Create the Perfect Transparent Login Form

Adeyele Paul on May 09, 2024

How you design forms with CSS makes a big difference. They can either catch someone's attention in a good way or turn them away One form style sur...

Read full post

Connor Van Etten • May 10 '24

Great article!

Something to add, when you make a transparent background you might want to blur the images behind the box, as they can make it harder to read. Try adding this to your login-container class in your CSS.

  border-radius: 8px;
  box-shadow: 1px 1px 5px 1px #c8c8c854;
  background-color: #c8c8c87c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid #e9e9e94f;

Adding backdrop-filter and -webkit-backdrop-filter along with a boxshadow that contains blur will add some level of "glass" like effect to your div.

Cheers!

Adeyele Paul • May 11 '24 • Edited

This!!! 📌📌📌

Adesoji1 • May 12 '24

True, he could add 👀 to view the password too then later asterisk it

Caio Vinicius • May 15 '24

Amazing article!

Mahesh Shinde • May 13 '24

Thank you bro!
Nice article, does GitHub link available?

Adesoji1 • May 12 '24

Rooting up 💪🏽 for you

Adeyele Paul • May 13 '24

Thank you, Adesoji 💜

Oluwagbenga Fadeko James • May 10 '24

Thank you for sharing bro!

Adeyele Paul • May 10 '24

You're welcome! Glad it was helpful.

Ericson Ramos • May 12 '24

Can you give me a sample design of real estate company landing page? Tia

R A M • May 10 '24

Nice work bro! Keep it up

Adeyele Paul • May 10 '24

Thank you 💪