The Glass Effect in Droip allows you to create a translucent and depth-rich glass-like look for your design. 

This effect is perfect for designing sleek interfaces, adding depth to cards and navigation, or giving your site an Apple-style premium touch.

Where to Use Glass Effect

• Cards: Glass product/feature cards in a grid.
• Navigation Bars / Headers: Frosted navigation bar that blurs background content on scroll.
• Modals & Popups: Keep focus on content while still revealing context behind.
• Hero Sections: Add depth and sophistication to landing page highlights.
• Background Overlays: Semi-transparent overlays that keep the background visible.

How to Apply Glass Effect

1. Select the Element: Choose the component on your canvas on which you want the glass effect
   
2. Remove or Soften Background: Set the background to none or lower the opacity.
   
3. Enable Glass: Go to Right Sidebar > Effects > Filters > Glass.
   
4. Adjust Glass Settings:
   
   • Refraction: Controls how much the background behind the glass bends or distorts. Higher values create a more liquid-like feel.
     
   • Depth: Defines how “thick” the glass appears, adding dimensionality.
     
   • Dispersion: Adjusts color splitting, giving a subtle prism effect.
     
   • Blur: Controls background blur intensity, from sharp to heavily frosted.
     
   • Light, Angle, Depth (lighting controls): Fine-tune how light interacts with the glass surface, adding realism.
     
5. Preview & Fine-Tune: Adjust sliders while checking against your background image, gradient, or texture.

Example Use Case: Frosted Cards

Goal: Create elegant translucent cards that blur content behind them.

Steps:

1. Prepare the background: Ensure the section behind the card has visual detail (image, gradient, video). Avoid flat, solid colors behind the card.
2. Add the card: Insert a Div inside your section/grid and resize the div. Add text/icons inside the card as needed. 

💡 Note: Keep the card above the background you want to blur. To do that, set the position to absolute and adjust the z-index value.

3. Remove Card background: Remove the background of the card or set the opacity to 0.
   

4. Enable Glass: Select the card > Right Sidebar > Effects > Filters > Glass.

Adjust the values until you get the desired effect. 

Tips for Best Results

To make the glass actually look like glass:

1. Element Background: Use no or low-opacity background. Solid fills block the glass effect.
   
2. Content Behind Glass: Use textured or detailed backgrounds. Pure white/black or fully opaque overlays weaken the effect.
   
3. Layering: Glass elements should sit above the content you want to blur (position absolute, high z-index).
   
4. Performance: Large or full-bleed glass sections may impact scroll performance. Prefer glass on cards/components instead of entire sections.