50%

CSS GlassMorphism Generator

This is how your glass will look

Select Color :

Select Opacity :

Select Blur :

Select Filter Effect :

CSS for Glass Morphism Effect

                        
#glass-object {
    border-radius: 25px;
    backdrop-filter: blur(18px);
    padding: 2rem;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%), 0 10px 15px rgb(0 0 0 / 20%);
    box-sizing: border-box;
    background-image: linear-gradient(45deg, rgba(66,60,90,0.6), rgba(66,60,90,0.6));
    width: 100%;
    height: 100%;
    mix-blend-mode: hard-light;
}

HTML for CSS Glass Morphism Effect

                        
<div id="glass-container">
    <div id="text-layer">
        This is your glass effect.
    </div>
    <div id="glass-object"></div>
</div>
                        
                      

CSS GlassMorphism Generator


A CSS Glassmorphism Generator helps create elements that look like frosted or blurred glass by applying a semi-transparent or translucent effect.

Create a variety of different looks using this effects such as:

  • Overlays: Overlays can be used to create a semi-transparent layer over other elements on the page.
  • Cards: CSS Glassmorphism cards can be used to create a more structured look for your website.
  • Background Blur: Control the degree of blur applied to the background to simulate the frosted glass look.
  • CSS Glassmorphism Generator
  • Transparency: Adjust the opacity of the glass element to control how much of the background is visible.
  • Color Palette: Choose the colors for the glass element, including its background and any text or content displayed.
  • Border Radius: Set the roundness of the corners of the glass element.
  • Shadow: Apply a subtle shadow to the glass element to enhance the illusion of depth.
  • Code Output: Generate the CSS code necessary to achieve the glassmorphism effect and quickly integrate it into your web project.