Figmaの標準エフェクト「ガラス」をコーディングできるか

先日、弊社デザイナーから「Figmaのエフェクトで『ガラス』が選択できる」と教えてもらい、へえ〜となりまして。iOS26から話題になったあれですね。

さらに「ただこのエフェクトがコーディングで実現できるのか分からなくて…」とも教えてもらいました。
Figmaに限らずこういったツールあるあるだなと感じたので「ちょっと試してみます！」ということがありまして、どうなったのか備忘録として残しておこうかなと思います。

（2026年6月現在の情報になります）

やってみる

【Figmaのエフェクト「ガラス」を試してみる】

とりあえず試してみようと思いまして、適当に背景とガラスエフェクトにしたいものを設置します。
今回はボタンにガラスのエフェクトをかけたいと思います。

なるほど、エフェクトから選べました。

とりあえずいろいろ調整してこうなりました。簡単でいいですね。

【開発モードを見てみる】

さっそくFigmaの開発モードで見てみます。
ガラスのエフェクトを入れた要素を選択するとこんなコードが取れます。

// レイアウト
width: 322px;
height: 90px;

// スタイル
border-radius: 100px;
background: rgba(255, 255, 255, 0.2);

（おや…いやな予感）
↓これをコピペしてみると、

いやな予感のとおり、無理でした…。 ちょっと透けてるだけのものになってしまいました。
今のところ、Figma内でだけいい感じに確認できるエフェクトのようです。

このままだと悲しいので、Figmaの見た目と同じっぽくなるように調整してみたいと思います。

【デザインデータをよく見てみる】

よく見ると立体的になるようにうっすらと枠線っぽいのが入っています。
白と透明のグラデーションが枠線にのっているような印象です。

これを実現しないとガラスっぽさがだいぶなくなってしまいそうです。
ですがご存じ、角丸の枠にはグラデーションが効きません。

なので、擬似要素とmaskをつかってどうにかします。
（CSS変数で後から変えやすいように記載しています）

.c-button--clear {
  border: var(--button-border-size) solid transparent; // 枠線の太さを確保
  border-radius: var(--button-radius-size);
  
  &::before {
    inset: calc(var(--button-border-size) * -1); // 枠線の太さ分だけ外側に広げる
    
    padding: var(--button-border-size); /* 枠線の太さ */
    border-radius: var(--button-radius-size);
    
    // デザインと同じようなグラデーションをかける
    background-image: linear-gradient(160deg , rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255 ,0) 62%, rgba(255, 255, 255 ,1) 100%);
    
    // マスクを使って内側をくり抜き、枠線だけを残す
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}

さらにbackdrop-filterでblurをかけてガラスっぽくします。
（残念ながらFigma上で出来る細かい設定まるっと実現はできません...）

.c-button--clear {
  backdrop-filter: blur(var(--button-bg-blur-size)); // すりガラス効果
}

【実装】

調整したものがこちらになります。
スクロールすると、調整前の「Figmaの開発モードからとれるコードのみで作成したもの」が確認できます。

だいぶ再現できたのではないでしょうか。

Figmaさん、いつの日かこちらコードで出てくるようになりますでしょうか。そっとお待ちしております。

まとめ

現状、開発モードでいい感じのコードは出てこないようです（仕様的にも少々難しい）が、見た目はバッチリコーディングする側には伝わるので「こうすれば似たようになるかもな…」と試行錯誤できるのは良いのかもなと思います。
もちろんデザイナーさんと（相談ができるようであれば）たくさん相談しましょう。

最近のFigmaはどこへ向かっているのでしょうか…頑張って追いかけていきたいと思います。
最後まで読んでいただき、ありがとうございました。