【Figma】CSSで実装できる機能・できない機能（Effect編）

2025年10月時点で広くサポートされているCSSで実装できるかどうかの観点で、Figmaの機能を見ていきます。
（SVGフィルターやJavaScriptでの実装が必要なものは「CSSで実装できない」と捉えます）

この記事ではFigmaのフレームに対して適用可能な「Effect（エフェクト）」について述べます。
（その他の機能については触れません）

前提

FigmaではEffectを複数重ね掛けすることができますが、CSSでは重ね掛けしすぎるとレンダリングに問題が出る場合があります。

また、単一の機能としてはCSSで実現可能でも、他の条件と複合すると実現できなくなる場合があります。

この記事で「CSSでほぼできる」とした機能でも、CSSで実装するとFigma通りのレンダリングにならない場合があることに留意してください。

CSSに無い

Layer blur（レイヤーブラー） と Background blur（背景ぼかし）の Progressive（プログレッシブ）

いわゆるプログレッシブブラーと呼ばれる、段階的なブラーはCSSにはありません。

CSSのbackdrop-filter とmask を利用して、疑似的なプログレッシブブラーを作ることができますが、疑似的なものです。（プログレッシブブラー表現のために大量のdivを設置する方法は通常の制作では現実的ではないでしょう）

参考：https://qiita.com/kskwtnk/items/569a36c802e46eeffef5

Noise（ノイズ）

NoiseはMono、Duo、MultiのいずれもCSSにはありません。

単なる画像加工の目的なら、そのままノイズ付きの画像としてエクスポートしましょう。

CSSで実装する必要があるならノイズと画像を分ける

たとえばCMSで投稿した画像にCSSでノイズを付与する必要があるなら、ノイズ単体と画像単体をそれぞれ別々の要素にして乗算等で重ねて配置してあげましょう。

このときノイズは100～200px程度のシームレスパターンであると理想的です。
目の細かなノイズの場合シームレスパターンでなくても適当なサイズで切り取って繰り返し（background-repeat）してもつなぎ目は目立ちません。

Texture（テクスチャー）

TextureはCSSにはありません。

近いCSS表現もないため、そのままテクスチャー付きの画像としてエクスポートする必要があります。

画像のふちのもちゃもちゃが不要な場合は、Clip to shape(シェイプにクリップする)で、フレーム境界でふちを切り落としておくと、画像として利用しやすくなります。

Glass（ガラス）

GlassはCSSにはありません。

近いCSS表現もないため、そのまま画像としてエクスポートする必要があります。

CSSで実装する必要があるならBackground blur（背景ぼかし）にする

CSSで実装する必要があるなら、後述するBackground blurとInner shadowに必要に応じてStrokeを組み合わせて表現しておきましょう。（歪みの表現はできません）

CSSでほぼできる（同じにならないこともある）

Drop shadow（ドロップシャドウ）

FigmaのDrop shadowはCSSでは通常box-shadowで実装します。

filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); としても近い結果が得られますが「Spreadの指定ができない」「レンダリングが重め」という違いがあります。

単純な四角形の要素に適用する場合、Figmaと近い見た目になるのは box-shadow です。

FigmaのDrop shadowにできて、CSSのbox-shadowにできないこと

FigmaのDrop shadowは内部に複数の要素を持つフレームやグループに対して適用した場合、filter: drop-shadow() のように透過を考慮した形状になります。

CSSのbox-shadowは各要素の透過を考慮しない形状（つまり四角形）になり、シャドウは各要素のすぐ後ろ側に来るので、要素間よりシャドウが大きくなると要素の上にシャドウが重なります。

filter: drop-shadow() の場合、透過を考慮した形状にできますが、シャドウの広がり方がFigmaと異なります。

※ box-shadow の形状はborder-radius については考慮します。

Inner shadow（インナーシャドウ）

FigmaのInner shadowはCSSではbox-shadowで実装します。※ただし inset キーワードを追加する

単純な四角形の要素に適用する場合、FigmaとCSSのbox-shadow はほぼ同じ見た目になります。

Drop shadowとは異なり、CSSのfilter プロパティは利用できません。

FigmaのInner shadowにできて、CSSのbox-shadowにできないこと

FigmaのInner Shadowは適用する要素の透過を考慮した形状で適用されます。

CSSの box-shadow は、透過を考慮しない形状（つまり四角形）になるため、CSSではFigmaとは異なる四角形のシャドウが描画されます。

※ box-shadow の形状はborder-radius については考慮します。

Layer blur: Uniform（レイヤーブラー: ユニフォーム）

FigmaのLayer blurはCSSではfilter:blur()で実装します。

※前述のとおりProgressive（プログレッシブ）はCSSで出ません

ブラウザのぼかしの計算方法によってFigmaと完全に一致しない場合もありますが、おおむねFigmaと同じレンダリングになります。

ただし、Figma上でBlurを4 で指定した場合、CSSでは 2px で指定する必要があります。

インタラクション（動き・変化）が無い画像は、「ぼかした画像」を書き出して

CSSのfilterプロパティは、描画のためにブラウザに計算させる分、描画の負荷が高くなります。
CSSで変化させる必要が無い画像は、画像として書き出しましょう。

背景画像で用いるなど、画像のふちのボケが不要な場合は、下記の手順でふちのボケを切り落としておくと、画像として利用しやすくなります。

Background blur: Uniform（背景のぼかし: ユニフォーム）

FigmaのBackground blurはCSSではbackdrop-filter:blur()で実装します。

※前述のとおりProgressive（プログレッシブ）はCSSで出ません

ブラウザのぼかしの計算方法によってFigmaと完全に一致しない場合もありますが、おおむねFigmaと同じレンダリングになります。

ただし、Figma上でBlurを4 で指定した場合、CSSでは 2px で指定する必要があります。

ただしfilter プロパティと同じく、描画のための計算コストが高く、他のCSSとの組み合わせでは適用できない・レンダリングが壊れる場合があります。

CSSでできるかどうかを確認するためのヒント

CSSでできるかどうかは、実装して各種ブラウザでチェックしてみないと分からない場合もあります。
（CSSの組み合わせ方や、ブラウザのバグによって実装できない場合があるため）

ただ「開発モードに値が出ないので無理そう」と分かるものもあるため、無理そうかどうかの判断のヒントのひとつにしてみてください。

• Inner shadow: 開発モードに出る・ほぼできる
• Drop shadow: 開発モードに出る・ほぼできる
• Layer blur (Uniform): 開発モードに出る・ほぼできる
• 🆖 Layer blur (Progressive): 開発モードに出るけどUniformと同じ・できない
• Background blur (Uniform): 開発モードに出る・ほぼできる
• 🆖 Background blur (Progressive): 開発モードに出るけどUniformと同じ・できない
• 🆖 Noise: 開発モードに出ない・できない
• 🆖 Texture: 開発モードに出ない・できない
• 🆖 Glass: 開発モードに出ない・できない