すりガラス越しに背景が透けて見える、あのふんわりした視覚効果。グラスモーフィズム（Glassmorphism）はbackdrop-filter: blurとrgbaの半透明背景を組み合わせることで、ガラス素材のような透け感と奥行きを生み出すデザイン手法です。グラデーション背景や写真背景の上に置いたとき、背景が滲んで見えるあの質感は、フラットなデザインにはない「層の厚み」を感じさせます。
この記事では、CSSのみで実装したグラスモーフィズムボタンを5本紹介します。JavaScriptは使わず、コピペですぐに使えます。WordPress / SWELLのカスタムCSSにも対応。なお、backdrop-filterはSafari・iOSでの動作に-webkit-backdrop-filterのベンダープレフィックスが必要です。各デモにはプレフィックスを含めているので、そのままコピーすればモバイルでも問題なく動きます。
Frosted Classic（フロステッド・クラシック）
グラスモーフィズムの基本形です。backdrop-filter: blur(10px)で背景をぼかし、rgba(255, 255, 255, 0.15)の半透明白をボタン背景に設定することで、すりガラスのような透け感が生まれます。ボーダーもrgbaの半透明白にしているため、ガラスの縁のように背景色と自然に溶け込みます。
グラデーション背景・写真背景のどちらにも合わせやすく、ヒーローセクションのCTAや、写真を背景にしたLPのボタンに最初に試してほしいデザインです。
See the Pen Frosted Classic by BaseKENT (@basekent) on CodePen.
調整方法
- 透過度:
rgba(255, 255, 255, 0.15)の最後の数値（アルファ値）を上げるほど白みが増し、下げるほど透明に近づきます - ぼかし量:
blur(10px)の数値で背景のぼかし具合を調整できます。5pxで薄いすりガラス、20pxで重厚な磨りガラス感に - 角丸:
border-radius: 12pxを変更してください。50pxでピル型になります
Tinted Glass（ティンテッド・グラス）
白ではなく、ブルー系の色味を乗せたガラスボタンです。rgba(64, 160, 220, 0.15)の青みがかった半透明背景と、ダーク系グラデーション背景の組み合わせが、深海を思わせる落ち着いた雰囲気を作り出します。ホバーでアルファ値が上がりボーダーが濃くなる変化も、フィルターガラスがかかったような視覚効果になっています。
テック系・クール系・宇宙・深海など、ダークでクールな世界観のサイトに特によく合います。ポートフォリオのスキルセクションや、SaaS系LPのナビゲーションCTAとしても使いやすいデザインです。
See the Pen Tinted Glass by BaseKENT (@basekent) on CodePen.
調整方法
- ガラスの色:
rgba(64, 160, 220, 0.15)の最初の3つの数値（R・G・B）を変えることでガラスの色味を変えられます。紫ならrgba(160, 64, 220, 0.15)のように - テキスト色:
color: #a0d8efとホバー時の#d0eefaはガラス色に合わせたアクセントカラーです。ガラス色を変えたら合わせて調整を - 背景:
bodyのbackgroundを変えると全体の雰囲気が変わります。暗い背景ほどガラス効果が際立ちます
Neon Frost（ネオン・フロスト）
ネオン発光するボーダーと、すりガラスの透け感を掛け合わせたデザインです。borderにrgba(0, 255, 200, 0.6)のグリーン系ネオン色を使い、box-shadowで外側・内側の両方にグローをかけることで、ガラスの縁が光るような独特の質感が生まれます。
ネオン系とグラスモーフィズムは一見相反するスタイルですが、両方のエッセンスが混在することで「未来的なガラス」のような雰囲気になります。ゲーム系・サイバー系・テクノロジー系のサイトに。以前紹介した「ネオン＆グロウ」ボタンと組み合わせたい場合にも、このNeon Frostは参考になる出発点になります。
See the Pen Neon Frost by BaseKENT (@basekent) on CodePen.
調整方法
- ネオン色:
rgba(0, 255, 200, 0.6)の色値を変えると発光色が変わります。ピンクならrgba(255, 64, 200, 0.6)のように - 発光の強さ:
box-shadowの数値（12px→20px）を上げるほど、ホバー時に光が広がります - 背景: ダーク系背景でないとネオン効果が目立ちません。
bodyの背景は暗めの色を保つのが前提です
Deep Blur（ディープ・ブラー）
backdrop-filter: blur(20px) brightness(0.9) と、ホバー時の blur(30px) brightness(0.75) で、強めのぼかし＋暗めの輝度調整を重ねたデザインです。Frosted Classicに比べてぼかしが強く、ホバーするほど背景が深く沈んでいくような視覚効果があります。
「ガラスを通して向こう側を覗いている」というよりも、「ガラスに押しつけたような密着感」がある重厚なデザインです。カラフルなグラデーション背景の上に置くと、ホバー時の色の沈み込みが特にきれいに見えます。背景のポップさとボタンの重厚さが対比するデザインが好みなら、このスタイルを選んでください。
See the Pen Deep Blur by BaseKENT (@basekent) on CodePen.
調整方法
- ぼかし量の差: デフォルトは
blur(20px)→ ホバーblur(30px)の10px差です。差を大きくするほど変化が目立ちます - 輝度の下げ幅:
brightness(0.9)→ ホバーbrightness(0.75)の差を広げると、より暗く沈む動きになります。0.6以下にするとやや暗すぎるので注意 - 背景との相性: 明るめ・カラフルなグラデーション背景ほどぼかし効果が際立ちます。暗い背景では効果が分かりにくくなります
Shine Reflect（シャイン・リフレクト）
::after疑似要素で上半分にlinear-gradient(135deg, rgba(255,255,255,0.3), transparent)を重ねることで、ガラス表面に光が反射しているように見せるデザインです。backdrop-filterによる透け感と組み合わせることで、実際のガラスオブジェクトに近い立体的な光沢感が生まれます。
他の4デモと異なるのは、ぼかし・色・輝度に頼るのではなく、疑似要素による「光の描写」が主役である点。単純なすりガラスではなく、「光を受けて輝くガラス」という表現にしたいときに選んでください。ハイエンドなポートフォリオや、高級感を演出したいブランドページのCTAに向いています。
See the Pen Shine Reflect by BaseKENT (@basekent) on CodePen.
調整方法
- 反射光の強さ:
::afterのrgba(255,255,255,0.3)のアルファ値を上げるほど反射が目立ちます。0.5以上にすると光が強すぎる印象になるので、0.2〜0.35程度がおすすめです - 反射の方向:
linear-gradient(135deg, ...)の角度を90degにすると垂直方向の光になります。45deg・135degで斜め光になります - Safari対応: このデモでは
overflow: hiddenで疑似要素をボタン内に収めています。border-radiusを変更した場合、overflow: hiddenはそのまま残してください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
