凹み文字CSSジェネレーター
背景が切り抜かれたような、凹んだように見える効果（デボス・レタープレス）のテキストCSSを作成します。
プレビュー
※background-clip: text を使用するため、背景色として指定します。
<div class="dented-text">{{text}}</div>.dented-text {
font-size: {{font_size}}px;
font-weight: bold;
color: transparent;
background: {{text_bg}};
text-shadow:
0 0 0.1em rgba(255,255,255,0.05),
0.01em 0.04em 0.03em rgba(255,255,255,0.4);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- 背景が切り抜かれたような凹み（デボス・レタープレス）効果のあるテキストCSSを作成するツールです。
background-clip: textを使用して、文字の塗りを背景色で表現しています。text-shadowでハイライトとシャドウを微調整することで、リアルな凹凸感を出しています。
ポイント
凹んで見えるようにするためには、背景色と「テキストの塗り」のバランスが重要です。
暗めの背景色の上に配置すると効果が際立ちます。
