ガラス調テキストCSS作成ツール
テキストの背景用に透明感と立体感を与え、ガラスのような質感を出すCSSジェネレーターです。
プレビュー
ガラス板の透明度（白の濃さ）と、背景のぼかし具合です。
光の反射（ハイライト）を表現する枠線の透明度です。
空間に浮いているような立体感を出す影の濃さです。
<div class="glass-container">
<p>{{text}}</p>
</div>.glass-container {
background: rgba(255, 255, 255, {{bg_alpha}});
backdrop-filter: blur({{blur}}px);
-webkit-backdrop-filter: blur({{blur}}px);
border: 1px solid rgba(255, 255, 255, {{border_alpha}});
border-radius: 12px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, {{shadow_alpha}});
padding: 30px 50px;
display: inline-block;
}
.glass-container p {
font-weight: bold;
color: {{text_color}};
margin: 0;
font-size: 50px;
}機能・使い方
- 「グラスモーフィズム」と呼ばれる、すりガラス調のデザインを作成するツールです。
- 背景が透けて見える領域を作り、その上にテキストを配置します。
- プレビューの背景を「ストライプ」や「画像」に変更すると、ガラスの効果がよくわかります。
CSSプロパティの説明
backdrop-filter: blur() が最も重要で、要素の背後にあるコンテンツをぼかす効果があります。
background: rgba(255, 255, 255, ...) で半透明の白を重ねることで、ガラスの質感を表現します。
border に半透明の白を指定することで、ガラスの縁（エッジ）に光が当たっているようなハイライト効果を作り出しています。
