DEV Community

Cover image for Building a simple landing page with Glassmorphism
Geek Sagar
Geek Sagar

Posted on

Building a simple landing page with Glassmorphism

Recently, there was a competition between my colleague in my workspace to design a food menu with your own ideas and creativity. Though the wirefire was given by my team lead to us.

Wireframe of the food menuWireframe of the food menu

I am a guy which usually only code or slice the site and have no knowledge of design. So I was thinking of doing some research and learn new things from this task so I surf the internet and found about glassmorphism and decided to implement glassmorphism design style. The most defining characteristics of glassmorphism are:

  • Transparency
  • Vivid colors to highlight the blurred transparency.
  • Light border

Glassmorphism design style is pretty easy to achieve for front-end developers. You only need to know about the CSS property backdrop-filter. To create the glassmorphism effect, you should use backdrop-filter: blur().

// HTML code
<div class="wrapper">
 <div class="card"></div>
</div>

//CSS code
* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #ffda3a 6%, #f68b1e 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  display: flex;
  align-items: center;
  justify-content: center; 
}

.card {
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2);  
}
Enter fullscreen mode Exit fullscreen mode

Alt TextThe above code output

The landing page that I designed is shown in the image below and I have also provided the source code of my project below.

Alt TextThe food menu landing design using glassmorphism design style

Link for source code: (https://github.com/sagarmaharjan/hantey/)
Link for github page: (https://sagarmaharjan.github.io/hantey/)

Since this is my first blog post, this post might sound boring. For those who had completed reading this post thank you very much. For those who are out there just thinking that I want to do that blah blah ..... I just wanna say Just do it!!!! hahaha.

Thank you!!!!!!!!!!!!!!!!

Discussion (5)

Collapse
albertwalicki profile image
Albert Walicki • Edited on

Nice gradient and images, looks exactly like mine ;)

Collapse
real_rijin profile image
Rijin Reji Thomas

I sometimes feel like front end is the most difficult task. Only creative people can pull it off.

Collapse
carshankar profile image
Ro Ko

@geek Sagar what's the best way to contact you ?

Collapse
sagarmaharjan profile image
Geek Sagar Author

You can DM me on Facebook. Here is my Fb id facebook.com/shagar.cobain/
And thank you very much.

Collapse
syiarinhu profile image
syiarinhu

Nice simple and to the point