【Figma】CSSで実装できる機能・できない機能（Effect編） | deep-space.blue

2025年10月時点で広くサポートされているCSSで実装できるかどうかの観点で、Figmaの機能を見ていきます。 （SVGフィルターやJavaScriptでの実装が必要なものは「CSSで実装できない」と捉えます） この記事ではFigmaのフレームに対して適用可能な「Effect（エフェクト）」について述べます。 （その他の機能については触れません） 前提 FigmaではEffectを複数重ね掛けすることができますが、CSSでは重ね掛けしすぎるとレンダリングに問題が出る場合があります。 また、単一の機能としてはCSSで実現可能でも、他の条件と複合すると実現できなくなる場合があります。 この記事で「CSSでほぼできる」とした機能でも、CSSで実装するとFigma通りのレンダリングにならない場合があることに留意してください。 CSSに無い Layer blur（レイヤーブラー） と Backgr