すりガラス風カードと有機的なborder-radiusを生成
スライダーを動かすだけで、モダンなUIで人気の「グラスモーフィズム（すりガラス風）」デザインのCSSと、有機的で柔らかい「blob（ブロブ）」形状を作る高度なborder-radiusのCSSを生成できる無料ツールです。インストールや会員登録は不要で、すべての計算はお使いの端末内（クライアントサイド）で完結します。生成したCSSは各セクションのコピーボタンでワンクリックコピーできます。
グラデーションや影を作る他のツールとは異なり、本ツールは「背後をぼかして透けさせるガラス表現」と「非対称な角丸によるユニークな形状」に特化しています。カラフルな背景の上にカードを重ねたプレビューで、透明感やぼかしの強さがどう見えるかをその場で確認しながら調整できます。
ブラー（blur）でぼかしの強さ、透明度（alpha）で背景の透け具合、ベースカラーでガラスの色味、彩度（saturate）で背後の色の鮮やかさ、ボーダー太さ・角丸・アウトラインで縁取りを調整します。半透明の背景色（rgba）と backdrop-filter を組み合わせることで、背後の要素がぼやけて透けるガラスのような質感が生まれます。
border-radiusは各角に水平・垂直の半径を別々に指定でき、合計8つの値を独立して操作できます。8つのハンドルを動かすことで、単なる角丸ではない有機的で非対称な形状を作れます。ランダム生成ボタンで思いがけない形状の発見も可能です。ヒーローセクションの装飾やアバター、アクセント図形などに活用できます。
グラスモーフィズムは、半透明の背景・背後のぼかし・繊細なボーダーの3要素で「曇りガラス越しに見る」質感を再現するデザイン手法です。中心となるのが backdrop-filter プロパティで、要素の「背後」にあるコンテンツにフィルタ（ぼかしや彩度調整）を適用します。要素自体ではなく背後に効くため、背景がカラフルなほど効果が際立ちます。
| プロパティ | 役割 | 目安 |
|---|---|---|
| background: rgba() | ガラスの色と透明度 | alpha 0.1〜0.3 が上品 |
| backdrop-filter: blur() | 背後のぼかし | 8〜20px 程度 |
| backdrop-filter: saturate() | 背後の彩度強調 | 150〜200% |
| border | ガラスの縁のハイライト | 半透明の白 1px |
| border-radius | 角の丸み | 12〜20px |
border-radius は「水平半径 / 垂直半径」の形で、それぞれ4角分（上左・上右・下右・下左）を指定できます。たとえば border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% のように書くと、各角ごとに水平・垂直の膨らみが変わり、雫のような有機的な形状になります。パーセント指定は要素サイズに追従するため、レスポンシブな形状表現に向いています。