Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 10, 2020 10:51 am GMT

Glassmorphism Login form with pure CSS

Last years neumorphism trend was horrible and awful. This year, Glassmorphism seems to be the new design trend. In this tutorial, I will be showing you how we can create this effect - the CSS way!

Before we begin, let's see what Glassmorphism is all about:

  • transparency (frosted-glass effect)
  • vivid colors
  • thin, light border

Glassmorphism is pretty easy to achieve. There is only one CSS property that we need to use: backdrop-filter. This property allows you to apply multiple effects such as blur, sepia*, and **greyscale to the area behind your component. Since it applies to everything behind the component, to see the effect, you must make this element at least partially transparent.

As I told you before, one of the key components of glassmorphism is a vivid background. You can use any bright color gradient you want. I would be using this:

Alt Text

body {    background: linear-gradient(45deg, #FC466B, #3F5EFB);}
Enter fullscreen mode Exit fullscreen mode

Now comes the main part. Only a translucent background and backdrop-filter won't produce what we want. There are a few more components of Glassmorphism:

  • A soft dropshadow on one side
  • Very thin white borders on the opposite side

For a quick demo, paste this code and see:

<div class="box"></div>
Enter fullscreen mode Exit fullscreen mode 
body {  background: linear-gradient(45deg, #FC466B, #3F5EFB);  height: 100vh;}.box {  height: 200px;  width: 200px;  background: rgba(255,255,255,0.3);  border-radius: 20px;  box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.1);  border-top: 1px solid rgba(255,255,255,0.2);  border-left: 1px solid rgba(255,255,255,0.2);}
Enter fullscreen mode Exit fullscreen mode

Got it? Let's dive into our main project - the login form.

HTML

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet"> <div class="container">  <form >    <p>Login</p>    <input type="email" placeholder="Email"><br>    <input type="password" placeholder="Password"><br>    <input type="button" value="submit">  </form>  <div class="drops">    <div class="drop drop-1"></div>    <div class="drop drop-2"></div>    <div class="drop drop-3"></div>    <div class="drop drop-4"></div>    <div class="drop drop-5"></div>  </div></div>
Enter fullscreen mode Exit fullscreen mode

CSS

I have used SCSS to create this.

$white: rgba(255,255,255,0.3);body {  background: linear-gradient(45deg, #FC466B, #3F5EFB);  height: 100vh;}.container {  position: absolute;  transform: translate(-50%,-50%);  top: 50%;  left: 50%;}form {  background: $white;  padding: 3em;  height: 300px;  border-radius: 20px;  border-left: 1px solid $white;  border-top: 1px solid $white;  backdrop-filter: blur(10px);  box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);  text-align: center;  position: relative;  p {    font-family: Montserrat, sans-serif;    font-weight: 500;    color: #fff;    opacity: 0.7;    font-size: 1.4rem;    margin-top: 0;    margin-bottom: 60px;    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);  }  input {    background: transparent;    width: 200px;    padding: 1em;    margin-bottom: 2em;    border: none;    border-left: 1px solid $white;    border-top: 1px solid $white;    border-radius: 5000px;    backdrop-filter: blur(5px);    box-shadow: 4px 4px 60px rgba(0,0,0,0.2);    color: #fff;    font-family: Montserrat, sans-serif;    font-weight: 500;    transition: all 0.2s ease-in-out;    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);    &:hover {      background: rgba(255,255,255,0.1);      box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);    }    &[type="email"],    &[type="password"] {      &:focus {        background: rgba(255,255,255,0.1);        box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);      }    }    &[type="button"] {      margin-top: 10px;      width: 150px;      font-size: 1rem;      &:hover {        cursor: pointer;      }      &:active {        background: rgba(255,255,255,0.2);      }    }  }}::placeholder {  font-family: Montserrat, sans-serif;  font-weight: 400;  color: #fff;  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);}.drop {  background: $white;  backdrop-filter: blur(10px);  border-radius: 10px;  border-left: 1px solid $white;  border-top: 1px solid $white;  box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2);  position: absolute;  transition: all 0.2s ease;  &-1 {    height: 80px;    width: 80px;    top: -20px;    left: -40px;    z-index: -1;    &:hover {      transform: translate(-2px, -3px);    }  }  &-2 {    height: 80px;    width: 80px;    bottom: -30px;    right: -10px;    &:hover {      transform: translate(3px, 4px);    }  }  &-3 {    height: 100px;    width: 100px;    bottom: 120px;    right: -50px;    z-index: -1;    &:hover {      transform: translate(4px, 0px);    }  }  &-4 {    height: 120px;    width: 120px;    top: -60px;    right: -60px;    &:hover {      transform: translate(5px, -5px);    }  }  &-5 {    height: 60px;    width: 60px;    bottom: 170px;    left: 90px;    z-index: -1;  }}input:focus,select:focus,textarea:focus,button:focus {    outline: none;}
Enter fullscreen mode Exit fullscreen mode

It should look something like this:

Alt Text

You can play with the code on my codepen.

Note: backdrop-filter is not supported on Firefox by default. You can enable it, but may produce glitches.


Original Link: https://dev.to/dasshounak/glassmorphism-login-form-with-pure-css-3fb1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To