Gaussian blur
The standard soft blur: each pixel averaged with its neighbors on a bell curve, giving smooth, even fuzziness with no smearing.
See it
What it is
Gaussian blur replaces every pixel with a weighted average of its neighbors, where the weights follow a bell curve: nearby pixels count a lot, distant ones fade off smoothly. That bell curve is why it looks clean instead of smeary. It is the default blur everywhere: Photoshop, Figma, CSS 'filter: blur()', SVG's feGaussianBlur. The single dial sets how wide that curve spreads, but the number means different things in different places. CSS and SVG take the curve's standard deviation (sigma), while image editors expose a radius of their own definition, so a 10 in one tool rarely matches a 10 in another.
Reach for it to push things back in the depth stack: dimmed backgrounds behind modals, soft glowing color blobs behind a hero, out-of-focus photo backdrops, and as an ingredient inside bigger effects (shadows, glow, bloom, and the gooey blur-plus-contrast trick all start with a Gaussian blur).
Gotcha one: it is not real defocus. A camera lens turns bright points into hard-edged discs (bokeh), while Gaussian blur turns them into soft mush, which is why blurred photos can look like fog instead of shallow depth of field. Gotcha two: blur samples pixels from outside the element, so blurred edges go semi-transparent and elements can visibly shrink; oversize the source or clip the result. And large radii are expensive, so animate opacity or scale rather than the blur value.
Ask AI for it
Apply a Gaussian blur to the background layer so the foreground content pops. Use a blur radius around 40px on the decorative color blobs and 8px on the background photo, keeping the foreground text and buttons perfectly sharp. Scale the blurred layer up by about 10% so the softened edges are cropped out and no transparent halo shows at the container edges. Do not animate the blur radius itself; if it needs to fade in, animate opacity instead and keep the blur constant.