How To Create A "Glassmorphic" Template In Pure HTML & CSS.
Tags: css, html, ux, webdev
Published: 2020-12-21 17:02:32

#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 [Dribble](https://dribbble.com/), [Behance](https://www.behance.net/) etc and I've seen a couple of awesome designs made using this trendy UI.

Here's an example by [Rishabh Saxena](https://dribbble.com/rish_designs)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ypnom22fdtrzohl2ga5x.png)

> 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...

##prerequisites##
To follow up with this tutorial, Since it might require we copy-paste some code to test things out, we'll:
* Create an **HTML** and **CSS** file ( *index.html* and *index.css*)
* Link to the full working code on [GitHub](https://github.com/Emmaccen/glass-morphism) if you ever get stuck.
* Link to [Live website](https://emmaccen.github.io/glass-morphism/) for reference.


The main **CSS property** to watch out for is the [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter). *Feel free to get documentations to any CSS or HTML properties on [MDN](https://developer.mozilla.org/)*. The `backdrop-filter : blur(_px)` is what gives it the **frosty-like glass effect**.
The backdrop-filter does more than just blur a background. Again, check the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for the full documentation.

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
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Glassmorphism" />
    <meta
      name="keywords"
      content="glassmorphism,UIUX"
    />
    <meta name="author" content="emmaccen" />
    <title>Glass Morphism</title>
  </head>
  <body>
    <div class="landingContainer">
      <div class="centered">
        <h1 class="title">Changing The World</h1>
      </div>
      <div class="glassContainer">
        <div class="cover"></div>
      </div>
    </div>
  </body>
</html>

```
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](https://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](https://developer.mozilla.org/) for full documentation if any **CSS** property isn't clear.
The result should look something like this:


![emmaccen, Oriola Emmanuel, glassmorphism](https://dev-to-uploads.s3.amazonaws.com/i/q4t0u0gefjb5jfjlfhj2.png)

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](https://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.

##Conclusion##

I'm always happy when I get feedback about my blogs, so don't hesitate to play with the comment/discussion area, like and bookmark this blog if you love it or share with others.

You can follow me on [Twitter](https://twitter.com/emmaccen), or send me a sample of what you've created.
You can also fork/clone the repo on [GitHub](https://github.com/Emmaccen/glass-morphism). I have two branches created. The [Master/Main](https://github.com/Emmaccen/glass-morphism) branch is what we practised in this tutorial. The [Second branch](https://github.com/Emmaccen/glass-morphism/tree/glass-morphism-v2) is what we have as the cover image of the article.

If you read up to this point, **thank you** I appreciate your will to learn and am happy to have you reading this.
Check out other [Glassmorphic designs](https://dribbble.com/tags/glassmorphism) on [dribble.com](https://dribbble.com/)

**More Design Inspiration**


Design by [Aakash Raj Dahal](https://dribbble.com/AkashRajDahal)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4cjdpc4vfgnmpui942ju.png)

Mobile design by [Brightlab](https://dribbble.com/Brightlab)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ud231ui5aukay8kqes0g.png)