DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Top UI Design Trend of 2021 - Glassmorphism
capscode
capscode

Posted on • Updated on • Originally published at capscode.in

Top UI Design Trend of 2021 - Glassmorphism

Alt Text

Hey Devs,

This is CapsCode.
Without wasting much time lets start with the TOP UI DESIGN TREND OF 2021 (i.e Glassmorphism)
As we all are aware that Neumorphism was the most used/ loved design in 2020, with the starting is new year we are also entering into the new design trend in place of Neumorphism i.e Glassmorphism.
This UI design is really an amazing and more interesting than Neumorphism.

Lets start creating Glassmorphism designs.

prerequisite: basic html, css tags only

Lets create index.html file as below:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrap">
   <h1>< CapsCode /></h1>
   <p>Visit: www.capscode.in</p>
   <div class="drop drop1">
      <div class="drop drop2"></div>
      <div class="drop drop3"></div>
      <div class="drop drop4"></div>
   </div>
</div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

then we will add css to these elements:
so lets create index.css file,

html,body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  min-height: 99vh;
}

body {
    background:#EA7773;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap {
  position: relative;
}

h1 {
    font-family: Arial;
    color:  black;
    font-size: 9em;
    padding: 20px 30px;
}

p {
    font-family: Arial;
    color:  black;
    font-size: 2em;
}


.drop {
   background: rgba(255,255,255,0.4);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.2);
   position: absolute;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
   display: block;
   margin: 0 auto;
}

.drop1 {
   width: 57%;
   height: 250px;
   top: 56px;
   left: 0;
   right: 0;
   z-index: 2;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.drop2 {
    width: 90px;
    height: 90px;
    top: -30px;
    left: -80%;
    right: 0;
    z-index: 4;
}

.drop3 {
    width: 100px;
    height: 60px;
    top: 220px;
    right: 30px;
    z-index: 3;
}

.drop4 {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   top: -90px;
   right: -80px;
}
Enter fullscreen mode Exit fullscreen mode

that's it my dear devs :)

we are done with how to create Glassmorphism designs, now you can customize it as much as you want.

If you like it please give a 👍

Thank you,
CapsCode
www.capscode.in
www.myemoji.ml

Top comments (5)

Collapse
 
shrihankp profile image
Shrihan • Edited on

backdrop-filter is not supported on Firefox, even on the latest version. An alternative to use would be the ::backdrop pseudo-selector. Or, just use SVG Filters, as in this codepen (Not by me).

Collapse
 
mrkbr profile image
Mario Kober

Okay

Collapse
 
chideraike profile image
Chidera

Thanks for this 👌🏾

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Please add the html and css tags to the code blocks

Collapse
 
capscode profile image
capscode Author

Thanks brother for bringing it in notice for us.
:)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.