View final results

  • Project 1
  • Project 2
  • Project 3

To make a long story short

The Glassmorphim effect is one of the trends that started in 2020 and will continue through 2021. Although this effect isn’t really new in Web design, it’s covered later in this article. The “frosted glass” effect is most commonly used for credit card visualizations, winning over many designers and mastering sites like Dribbble. We have soft versions, bright colors or dark patterns, lots of possibilities. But today, I want to show you how to use this excellent effect in your website design (for example, a landing page or portfolio). Let’s get down to business.

Where did it come from

As I mentioned in my introduction, blurred backgrounds are already used in the Windows Vista UI, for example in the menu that opens when you click Start. It was a black transparent background. In 2013, Apple introduced this effect in iOS 7, including making it visible when swiping up on the screen. Currently, Microsoft uses an effect called The Acrylic in its Fluent Design System Design language. I think that’s enough history, so let’s move on to the modern guidelines necessary to create GlassMorphsim effects in Web projects.

What is the pattern of this trend

Glassmorphism is characterized by:

  • It mimics the look of frosted glass by using background blur
  • The concept of transparency
  • The hierarchy and structure of layers
  • Use clear shapes and bright colors in the background to emphasize blurred transparency
  • Translucent objects have subtle boundaries

How do you achieve this with CSS

Using the MDB generator to achieve this effect is very simple, as you can find in the link below. Simply use the slider to select the “Blur” and “transparent” values and select the background color, and the tool generates the necessary CSS and HTML code. Then, add the generated code to your project, and voila! Beautiful, subtle glass assimilation effects have appeared on your site. To make it easier and more enjoyable for you, I have prepared three projects that show you the various possibilities of its use.

Glassmorphism generator

Project 1- Simple introduction page

In this project, I used the Glassmorphim effect as a background mask to blur the photos into vivid colors and highlight the most important text in the blurb center.

Item 2- Introduction page with cards

In this project, I created a GlassMorphism card in which I added some other styles to the basic styles of the generator, such as border, border-radius, background-clip, etc., and attached MDB animations for better visual impact.

Item 3- Personal card

In this project, I created a set of cards that you can use to express your team’s or customers’ opinions. In addition to using the white translucent background of the card, I used a dark gray so that you can also use the glass morphing effect in dark mode, and added a more polished animation.

summary

Hopefully, the examples above have convinced you that glass homogeneity is a trend that can be easily achieved with CSS, but with impressive results. It’s definitely useful when you want to highlight important content and something minimalist. Of course, it’s not worth overusing, and I’m sure a section or two on the site will suffice. Try, experiment, and share projects in MDB snippets. Good luck!