How To Create A “Glassmorphic” Template In Pure HTML & CSS.

How To Create A “Glassmorphic” Template In Pure HTML & CSS.:

What Is Glassmorphism?

If you’re hearing the term “Glassmorpism” for the first time, well… It only just got my attention a few hours before this post so, What is glassmorphism?

Glassmorphism is a new trend which is getting more traction on websites like DribbleBehance etc and I’ve seen a couple of awesome designs made using this trendy UI.

It is important to note that as of the time of writing this blog, glassmorphism is not widely used on the web yet. So we’re going to be exploring the power of our creativity.

Attributes/Characteristics

  • Translucency (frosted-glass)
  • Detailed Colors (becomes cloud-like)
  • Shadows
  • Everything else…

The backdrop-filter does more than just blur a background. Again, check the MDNfor the full documentation.backdrop-filter : blur(_px)

In order for this to work effectively, the element has to be partly translucent(mimicking a glass-effect).

Now, in our index.html let’s paste the code block below



  
    
    
    
    
    
    
    Glass Morphism
  
  
    

Changing The World

I won’t be doing any explanation on the HTML code snippet since its pretty basic.

index.css

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.landingContainer {
  /* span the entire desktop height : height: 100vh;*/
  height: 100vh;
  font-family: helvetica;
  /* set a gradient background with 3 colours https://coolors.co/ */
  background: linear-gradient(
    to right,
    rgba(32, 191, 85),
    rgba(32, 164, 243),
    rgba(11, 79, 108)
  );
}

.centered {
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* so it takes up its containers height (landingContainer)*/
  height: inherit;
}

.title {
  color: whitesmoke;
  /* cover the entire page width : font-size: 10vw;*/
  font-size: 10vw;
  text-align: center;
}

/* The real deal  starts here*/
.glassContainer {
  position: absolute;
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover {
  transition: 0.5s all ease;
  height: 70%;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.25);
  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  /* For the fog-like glass effect */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
}

/* responsiveness */

@media (max-width: 700px) {
  .cover {
    height: 30%;
  }
}

Now for the CSS code above.

  • I got my colour combo from Coolors.co so, you can mix and match to replace mine.
  • I’ve included comments in the code, so I won’t have to explain here again. You can Check MDN for full documentation if any CSS property isn’t clear. The result should look something like this:

So that’s it. This tutorial is pretty basic and I wanted it to be something we can go through in 5-10Mins. I hope this wasn’t a waste of your precious time.

My Thoughts

Am really looking forward to 2021 and the awesome real-world application of people’s creativity with Glassmorphism. I have a feeling it’ll trend for quite a while if done right.

Pro Tips

  • You can save a lot of time by checking out glassmorphism.com. It’s a website that helps you generate glassmorpic CSS styles on the fly. Also, you can modify as you wish (it comes with visual representations too)
  • Glassmorphism is not limited to the web alone if you build/design native apps, you might want to implement these designs too.

If you read up to this point, thank you I appreciate your will to learn and am happy to have you reading this.

More Design Inspiration

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s