Glassmorphism Login form with pure CSS

Glassmorphism Login form with pure CSS:

 

Last year’s 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:

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

Now comes the main part. Only a translucent background and backdrop-filterwon’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:

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);
}

Got it? Let’s dive into our main project – the login form.

HTML

 


  
    
Login
    

    

    
  

  

    

    

    

    

    

  

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;
}

It should look something like this:

from Tumblr https://generouspiratequeen.tumblr.com/post/637193381696733184