CSS Glass Morphism Generator
In this article, let's generate CSS glass effects
Join the DZone community and get the full member experience.Join For Free
A little while ago I used the CSS glass morphism effect to create some apple UI elements. To show how this effect works a little better, I've created a CSS glass morphism generator below. You can change the options, and generate your own glass morphism along with code.
Since we are using
mix-blend-mode to make our effect a little more blended, our text layer will have to sit in a separate div so it the blend mode is not applied to it. Note, that although widely supported, this will not currently work in Firefox as expected.
This effect is based off two CSS properties -
backdrop-filter. The first, lets us blend our element with the element behind it. The second lets us blur or add a filter to semi-opaque backgrounds so that the background behind the element can be filtered. We're using blur as our filter to create the glass effect, but others work too. To read more on this topic, try our other tutorial here.
The glass morphism effect tends to degrade quite gracefully, as if it isn't supported, there simply isn't an effect displayed. It is broadly supported, however, as shown in the table below.
Published at DZone with permission of Johnny Simpson, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.