layer blur vs background blur

Figma Layer blur와 Background blur는 UI 이름은 비슷하지만, 샘플하는 픽셀이 다릅니다. SVG filter의 in 소스가 갈립니다.

LAYER_BLUR — 레이어 자체

{ "type": "LAYER_BLUR", "radius": 12, "visible": true }

import { figmaLayerBlurToSvgFilter } from "svg-matrix-core";

const { filterAttr, markup } = figmaLayerBlurToSvgFilter({ radius: 12 }, "layer-blur");

<filter id="layer-blur" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="6"/>
</filter>

SourceGraphic = 이 요소의 RGBA 전체가 뿌옇게 — 글자·아이콘도 번짐.

CSS: filter: blur(12px) on element.

BACKGROUND_BLUR — 뒤만

{ "type": "BACKGROUND_BLUR", "radius": 16 }

import { figmaBackgroundBlurToSvgFilter } from "svg-matrix-core";

const { markup } = figmaBackgroundBlurToSvgFilter({ radius: 16 }, "bg-blur");

<filter id="bg-blur" ...>
  <feGaussianBlur in="BackgroundImage" stdDeviation="8" result="blur"/>
  <feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>

BackgroundImage — filter 적용 요소 뒤에 이미 그려진 픽셀. 위에 반투명 카드를 올리면 유리판 효과.

CSS: backdrop-filter: blur(16px).

데모

• checker 배경 + 반투명 흰 card
• toolbar blur type: layer | background
• radius 슬라이더

readout에 생성된 <filter>… 전체가 출력됩니다.

radius ↔ stdDeviation

둘 다 figmaBlurRadiusToStdDeviation(radius) — 031과 동일.

한계

• SVG BackgroundImage는 HTML backdrop-filter만큼 everywhere 동일하지 않음 — export 시 CSS fallback 병행하는 제품이 많음 (057 paint gap)
• 여러 레이어 blur는 filter 합성 순서 = 레이어 트리 순서 (061)

Core API

• figmaLayerBlurToSvgFilter, figmaBackgroundBlurToSvgFilter
• figmaBlurRadiusToStdDeviation

관련

• 035 in 키워드 · 039 dispatch

오늘의 핵심

같은 Gaussian, 다른 입력 버퍼. glass UI = background blur + 반투명 fill.