Free · Fast · Privacy-first

CSS Blur Filter Generator

The CSS blur filter applies a Gaussian blur to an element, softening its edges and creating depth of field and frosted glass effects that were previously only achievable with image editing software, JavaScript canvas manipulation, or pre rendered image assets.

⚡

Generate filter: blur() values with live preview

🔒

Preview backdrop-filter: blur() frosted glass panels

✨

Supports blur on pseudo-elements for layered depth effects

⚡

Copy-ready CSS for any blur configuration

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Filter Effects Builder to your website

Drop the Filter Effects Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Filter Effects Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Filter Effects Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Gaussian Blur Mechanics, Frosted Glass with backdrop-filter, and Depth-of-Field via ::before

The filter: blur() function applies a Gaussian blur algorithm to the rendered pixels of an element and any descendants. The argument is a CSS length value in px, rem, em, or any other length unit: filter: blur(4px) applies a moderate soft blur while filter: blur(20px) produces heavy blurring where the original element shape is barely recognisable. The Gaussian algorithm samples pixels in a radius around each output pixel, weighted by a bell curve distribution, so edges fade smoothly rather than hard clipping. Zero is a valid value and produces no blur, which is useful as an explicit base state for transitions. Negative values are invalid and the entire filter declaration is ignored if a negative value appears. The computational cost scales quadratically with the radius: a 20px blur requires sampling roughly 25 times more pixels than a 4px blur for each output pixel, making large blur values on large elements one of the most GPU intensive filter operations available in CSS.

The backdrop-filter property uses the same blur() function syntax but targets the composited content behind the element rather than the element itself. For a frosted glass card, the element is given a semi transparent background such as rgba(255,255,255,0.4) along with backdrop-filter: blur(12px) in the same rule. The browser renders everything behind the card into an off screen buffer, applies the blur to that rendered output, then draws the semi transparent card over it. The result is the characteristic frosted glass effect where background content is visible but diffused into soft colour shapes. Safari requires the -webkit-backdrop-filter prefix for compatibility with versions before Safari 15.4, and Firefox required a flag in about:config before Firefox 103 shipped stable support in mid 2022. Both prefixed and unprefixed declarations should be included for production code.

Applying blur to a ::before pseudo element creates a depth of field effect where a background image is blurred independently of the foreground text content above it. The technique works by setting the parent to position: relative, then creating a ::before with position: absolute, top: 0, left: 0, width: 100%, height: 100%, z-index: -1, the background-image set on the pseudo element, and filter: blur(8px). The foreground content in the parent element remains sharp while only the background appears blurred. A small negative inset such as -10px on all sides prevents hard edges at the element boundary where the Gaussian blur tapers off, which would otherwise leave a visible unblurred sharp border line around the element where the blur has not had enough room to spread.

Performance characteristics for blur effects vary substantially with element size and the surrounding compositing context. A small blur applied to a small element such as an icon is essentially free. A 20px blur applied to a full viewport hero image during a continuous animation can drop frames even on modern desktop hardware, and on mid range mobile devices it can produce visibly choppy interactions. The recommended workflow is to test every blur effect under Chrome DevTools Performance recording with CPU throttling set to 4x or 6x, watching the timeline for paint and composite spikes that exceed the 16ms frame budget. Static blur applied at page load is much cheaper than animated blur because the result is computed once and cached, so prefer triggering blur through static class changes rather than continuous animation when possible.

MDN: blur()MDN: backdrop-filter

How to use this tool

💡

Set the blur radius slider and watch the preview element soften in real time. Switch to backdrop-filter mode to preview a frosted glass panel over a coloured background. Copy the generated CSS when the blur intensity matches your design.

How It Works

Step-by-step guide to css blur filter generator:

1
Select blur mode
Choose filter: blur() for blurring the element and its contents directly, or backdrop-filter: blur() to blur the content visible behind a semi transparent panel. The mode toggle in the generator switches the preview between an opaque blurred element and a glass panel over a coloured background so you can see the difference between the two approaches before committing.
2
Adjust the blur radius slider
Drag the radius slider until the softness matches your target effect at the size you plan to use the element. For subtle depth on icons and small panels, 2px to 4px is usually sufficient. For frosted glass navigation and modal overlays, 8px to 16px is typical. For dramatic background dimming, 20px and above creates strong diffusion that loses most original detail.
3
Set background opacity for backdrop-filter
If using backdrop-filter, adjust the panel background-color alpha value to control how much of the blurred background shows through the panel. Lower alpha values such as 0.2 to 0.4 reveal more backdrop, producing a transparent glass look. Higher alpha values from 0.6 to 0.85 hide more backdrop, keeping panel content highly readable against any background content beneath it.
4
Copy the generated CSS
Copy the filter or backdrop-filter declaration from the generator. Paste it into your stylesheet on the target selector and add the -webkit-backdrop-filter prefix line if Safari compatibility for versions older than 15.4 is required. Wrap the glass styles in @supports (backdrop-filter: blur(1px)) to declare an opaque fallback background for browsers that do not implement the property at all.

Real-world examples

Common situations where this approach makes a real difference:

Frosted glass navigation header

A developer building a portfolio site wants a navigation bar that shows the page content scrolling behind it in a softly blurred state to provide visual continuity between sections. They apply backdrop-filter: blur(12px) with background: rgba(255,255,255,0.6) to the header element. The generator helps them find the right radius and opacity balance so the nav content remains readable while the background blur reads as a real glass panel. A -webkit-backdrop-filter line is added before the unprefixed declaration for older Safari versions, and an @supports fallback ensures the header stays usable on browsers without backdrop-filter implementation support.

Modal overlay background blur

A SaaS app developer wants the page content to blur when a modal dialog opens, signalling to users that the background is inactive while the modal is open. They apply filter: blur(6px) to the main content wrapper via a .modal-open class toggled by JavaScript when the modal opens and removed when it closes. The generator previews the effect at several radius values against representative dashboard content. The chosen 6px value is subtle enough not to feel harsh or disorientating while clearly communicating that the background is no longer interactive and the focus is on the modal contents.

Hero section with blurred background image

A marketing developer adds a large background photograph to a hero section but needs the headline text and call to action button to remain perfectly sharp and readable. They use the ::before pseudo element technique with filter: blur(10px) applied only to the pseudo element, keeping the foreground text crisp while the background photo becomes a soft colour wash. The generator outputs the full pseudo element CSS block including the position, z-index, and negative inset extension values needed to prevent visible unblurred edges at the section boundaries where the Gaussian blur would otherwise taper off.

Card hover depth effect

An e commerce developer wants product cards to blur slightly when a sibling card is hovered, simulating depth of field focus shifts found in physical photography. They apply filter: blur(0) to all cards in the resting state and filter: blur(2px) to cards that are not the currently hovered one using a parent hover selector combined with :not(:hover). The transition on filter creates a smooth shift between focused and unfocused states across the grid, drawing attention to the active card without any layout changes, scale transforms, or JavaScript event handlers required to coordinate the effect.

Pro tips

Get better results with these expert suggestions:

Use isolation: isolate to contain backdrop-filter stacking context issues

When backdrop-filter is applied inside a stacked layout, parent elements with transform, filter, or will-change can break the backdrop-filter by creating a new compositing context that the property cannot sample through. The backdrop then becomes the composited parent rather than the actual page background and the blur effect disappears. Adding isolation: isolate to the correct ancestor contains the stacking context and resolves the issue without altering the visual layout, though in complex hierarchies restructuring the DOM to remove the conflicting compositing properties is often more reliable than chasing isolation fixes.

Animate blur from 0 to target value for reveal effects

Transitioning filter: blur(0) to filter: blur(8px) over 0.3s ease creates a focus loss effect that works well for modal overlays, background dimming, or focus shifting interactions. The opposite direction, blurred to sharp, works as an entrance effect for content that loads after an initial blurred placeholder is shown. Always start from filter: blur(0) rather than filter: none, because some browsers do not interpolate cleanly from the none keyword to a filter function value and may snap rather than animate, producing a visible glitch at the start of the transition.

Combine backdrop-filter with a subtle border for glass definition

A frosted glass panel with no border can look undefined and lacking weight against certain backgrounds. Adding border: 1px solid rgba(255,255,255,0.3) to the panel gives it a highlight edge that reads as a physical glass surface, particularly on dark or gradient backgrounds where the contrast between panel and background is low. For dark glass panels on light backgrounds, swap to a slightly darker border colour to provide similar definition. The border combined with the blur and partial opacity completes the material illusion convincingly.

Profile blur performance before shipping animated blur

Animating blur is one of the more expensive filter animations to run continuously. Use the Chrome DevTools Performance panel with CPU throttling set to 4x or 6x to simulate a mid range mobile device while recording an interaction that triggers your blur animation. If the animation drops below 60fps in the recorded profile, reduce the blur radius, restrict the animation to a smaller element rather than a full page overlay, or shorten the animation duration so the expensive period passes faster. Persistent navigation blurs on scroll are particularly prone to this issue.

Extend ::before beyond parent bounds to hide blur edges

Gaussian blur produces a visible soft edge at the element boundary. Set the blurred ::before to extend 10px to 15px beyond the parent in all directions using negative inset values or a negative margin. Clip the overflow on the parent to hide the extension.

Add a fallback background for unsupported backdrop-filter

Browsers that do not support backdrop-filter will show the semi-transparent panel without the blur effect. Use a slightly more opaque fallback background colour such as rgba(255,255,255,0.85) to keep the panel readable if the blur does not apply.

Keep blur radius proportional to element size

A 4px blur on a 40px icon is dramatic. A 4px blur on a 600px hero image is imperceptible. Scale blur radius to the element dimensions. A blur of approximately 1 to 2 percent of the shorter element dimension tends to produce a visually balanced softness.

FAQ

Frequently asked questions

The blur() function accepts any CSS length value: px, rem, em, vw, vh, and ch are all valid units. Percentage values are not accepted by the blur() function and using one will cause the browser to ignore the entire filter declaration. In practice, px values are by far the most common in production CSS because blur radius is typically a fixed visual quantity that should not change with font size or viewport dimensions. Values of 0px and 0 are equivalent and produce no blur, useful as an explicit starting state for transitions. The value must be non negative; negative values are invalid and the browser ignores the entire filter declaration if an invalid value is present anywhere in the function list.

filter: blur() blurs the element and all its descendants in place, including any text, images, or backgrounds inside it. backdrop-filter: blur() instead blurs only the content visible behind the element through its transparent or semi transparent background areas, leaving the element contents themselves perfectly sharp. For a frosted glass effect you almost always want backdrop-filter because the goal is for the background to appear blurred while the panel content such as headings, body text, and icons remains crisp and readable. Using filter: blur() on the same panel would blur the panel text and icons, which is the opposite of the intended effect and makes the panel unreadable.

backdrop-filter gained stable Firefox support in Firefox 103, released in July 2022. Before that version, Firefox users required the layout.css.backdrop-filter.enabled flag set to true in about:config to see the effect, which is not realistic to expect from end users. For projects supporting Firefox 103 and later, no special handling is needed beyond the standard declaration. For broader support including older Firefox versions, provide a fallback using a more opaque background-color inside an @supports negation so the panel remains visually usable and the text remains readable when the blur effect does not apply at all.

The most common cause is that a parent element somewhere in the stacking context order has a transform, filter, will-change, opacity less than 1, or perspective property applied, which creates a new compositing layer that backdrop-filter cannot sample through. The blur then operates on the empty composited parent rather than the page background and produces no visible effect. Check every ancestor element systematically for these properties using DevTools. Also confirm the element has at least a partially transparent background colour, because backdrop-filter has no visual effect on fully opaque elements: the background behind a fully opaque element is never visible through it, so there is nothing for the filter to blur.

Yes. CSS transitions and @keyframes animations interpolate blur() values smoothly between two valid length values. Set transition: filter 0.3s ease on the element and change the filter value in a hover or class state to trigger the animation. Both the start and end values must be valid blur() lengths in the filter property; transitioning from filter: none to filter: blur(8px) may not interpolate smoothly in all browsers because there is no defined mapping between the none keyword and a function value. Use filter: blur(0px) as the explicit starting state for reliable interpolation across all engines and to avoid snap glitches at the start of the animation.

No. CSS filter does not change layout in any way. The element retains its original dimensions and document flow position regardless of the blur radius applied. The blurred rendering may visually extend slightly beyond the element boundary at high blur values because the Gaussian function spreads pixels into surrounding space, but this does not cause layout shifts or affect the positioning of surrounding elements. If the blur overflow is clipped by a parent with overflow: hidden, you may need to add padding to the parent, set overflow: visible, or restructure the layout so the blurred element has room to render its soft edges without being cropped at the boundary.

Gaussian blur is computationally intensive because it requires sampling many surrounding pixels for each output pixel, and the number of samples increases roughly with the square of the radius. A filter: blur(30px) on a full width section can cause visible frame drops on mid range mobile devices and even on slower desktop hardware. For large elements, keep blur radius under 10px when possible and avoid animating it continuously. Use the Chrome DevTools Rendering tab to highlight GPU intensive operations while the blur is active, and the Performance panel with CPU throttling to measure actual frame timings on simulated lower end hardware before shipping the effect to production users.

The standard technique is to place the background image on a ::before pseudo element with position: absolute covering the parent, z-index: -1 to push it behind the content, and filter: blur() applied only to the pseudo element. Set the parent to position: relative so the pseudo element is positioned within its bounds. The parent foreground content then renders above the blurred pseudo element without inheriting the filter because filter is not an inherited property in CSS. Extend the pseudo element 10px to 15px beyond the parent boundary using negative inset values such as top: -10px to prevent unblurred edges at the corners where the Gaussian tapers off.

Yes, generally backdrop-filter is more expensive than the equivalent filter property at the same radius because the browser must composite all content behind the element into a separate off screen buffer, apply the blur to that buffer, and then blend the result with the panel above it. The filter property in contrast only needs to process the element and its children. The exact difference depends on how much content sits behind the backdrop-filter panel: a small panel over a simple background is similar in cost to a regular filter blur, while a full screen overlay over a content heavy page can be substantially more expensive and should be profiled before shipping.

Declare a sufficiently opaque background-color as the default value outside any conditional block, such as background: rgba(255,255,255,0.9), which keeps the panel readable even without the blur. Then wrap the frosted glass styles in @supports (backdrop-filter: blur(1px)) { } and inside that block declare a lower opacity background such as background: rgba(255,255,255,0.4) along with the backdrop-filter and -webkit-backdrop-filter properties. Browsers that support backdrop-filter use the lighter glass version with the blur; browsers that do not fall back to the opaque background and the panel remains usable, even though the visual effect is simpler.