Member Avatar for RCrizt

like yahoo mail did (new update as of october 2013),
i cant find library or script that can make a div transparent and at the same time blur.

  • 3 Contributors
  • 4 Replies
  • 190 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sriramkarthick

Dani AI

Generated

For a true “Yahoo Mail”–style frosted panel (transparent + blur of whatever sits behind it) the modern, simplest approach is CSS’s filter/backdrop-filter. ’s text-shadow trick is useful for blurring text only, but it does not blur the page behind an element. ’s Codrops demos are great for animated menus, but today a native CSS property covers the basic frosted-glass need.

A compact, production-ready pattern uses backdrop-filter (with the Safari prefix). This blurs the backdrop while keeping the element’s contents sharp:

.frosted {
  position: relative;
  background-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  border-radius: 8px;
  padding: 1rem;
}

Modern browsers implement this behavior via the CSS filter effects module; filter blurs an element itself, while backdrop-filter blurs what’s behind it. See the spec/examples for usage. (developer.mozilla.org)

Fallbacks and edge cases:

  • Use a feature query to detect support and provide a sensible fallback (less transparency or a pre-blurred background image) for older browsers.
  • If backdrop-filter behaves oddly (nested menus, sticky headers, overflow/border-radius interactions), the common workaround is a positioned pseudo-element or a dedicated blurred background layer placed behind the foreground content. (css-tricks.com)

Troubleshooting and best practices:

  • The overlay needs some alpha in its background (rgba) for the blur to be visible.
  • Include -webkit-backdrop-filter for Safari compatibility and check Can I Use for the target browser mix.
  • Avoid animating large blur radii—filters can force repaints and be expensive on mobile; prefer static blur and animate transforms instead. Use @supports and small radii for best performance. (medium.com)

This approach replicates the frosted effect cleanly and is the preferred replacement for text-only hacks when the goal is to blur the page behind a translucent element.

Member Avatar for RCrizt

and not like using two image, that one image is blur.

Member Avatar for Assembly Guy

For the transparency, Read up on Opacity.
I achieve blur by giving the text within the elements which I want to blur a text shadow and no text colour (ie, no alpha in an rgba() set), for example:

.blurred
{
    color: rgba(0,0,0,0);
    text-shadow: 0px 0px 4px #000;
}

You could trigger this class to be applied to an element using Javascript.

Edited by Assembly Guy
Member Avatar for RCrizt

thanks, :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.