ToolypetMCP
intermediate3 minutescss

Glassmorphism Effect

Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.

glassmorphismbackdrop-filtergradientmodern

इस रेसिपी का उपयोग कब करें

Glassmorphism is a popular design trend seen in Apple's macOS and Windows 11. Use it for modals, cards, or navigation bars that overlay rich backgrounds.

चरण

1

Apply the frosted glass blur

प्रॉम्प्ट:Generate backdrop-filter: blur(16px) saturate(180%) for a frosted glass effect
2

Add a subtle white overlay

प्रॉम्प्ट:Generate a linear gradient from rgba(255,255,255,0.15) to rgba(255,255,255,0.05) at 135 degrees
3

Round the glass panel corners

प्रॉम्प्ट:Generate 16px border radius for all corners

अक्सर पूछे जाने वाले प्रश्न

Does glassmorphism work in all browsers?

backdrop-filter is supported in all modern browsers. For older browsers, use a solid semi-transparent background as fallback.

What background works best behind glass?

Colorful gradients, images, or animated backgrounds create the most striking glass effect. Solid colors won't show the blur.

संबंधित रेसिपी