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