CodeKitHubこのツールとは？
このツールは、明るい色と暗い色のtext-shadowを逆方向にオフセットして組み合わせることで、浮き出た(エンボス)または彫り込まれた(エングレーブ)テキストの錯覚を作り出します。
EmbossedとEngravedのスタイルを切り替え、強度スライダーで3D効果の強さを調整できます。
テキストを入力したり設定を変更したりするたびに、ライブプレビューが即座に更新されるので、CSSをコピーする前に効果を細かく調整できます。
なぜこれを使うのか？
- コーポレートサイトのフッターに、シルバーの金属プレートに刻印されたような会社ロゴのテキストを作りたいが、画像を用意せずCSSだけで軽量に実装したいとき。
- レトロなWindows 95風のUIをあえて再現するポートフォリオサイトで、ボタンやパネルのラベルにスキューモーフィックな立体感を出したいとき。
- ECサイトの高級感を演出するバッジやラベルに、革や金属に彫り込まれたようなエングレーブ効果を使いたいが、box-shadowだけでは狙った質感にならず試行錯誤しているとき。
- デザインカンプで見た『浮き出し文字』を、画像を書き出さずにCSSで再現するよう指示され、text-shadowの数値をどう組み合わせればいいか分からないとき。
- 強度スライダーを動かしながらライブプレビューを見比べて、控えめなエンボスから強めのエングレーブまで、サイトの雰囲気に合う塩梅を探りたいとき。
- クライアント案件の未公開デザインをまだ外部に見せられない段階でも、すべてブラウザ内で完結するのでコピペしたCSSがどこにも送信されない安心感があるとき。
使い方
- スタイルを適用したいテキストを入力します。
- スタイルセレクターからEmbossed(浮き出し)またはEngraved(彫り込み)を選びます。
- 強度スライダーを調整し、デザインに合った背景色とテキスト色を選びます。
- 「Copy」をクリックして生成されたCSSコードをコピーし、スタイルシートに貼り付けます。
例
入力
テキスト:「Embossed」、スタイル:Embossed、強度:2出力
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);生成されるCSSは、テキストカラー、背景色、そして浮き出しや彫り込み効果を作る2層のtext-shadowを設定します。
効果の仕組み
エンボスとエングレーブの効果は、明暗が逆の2つのオフセットtext-shadowレイヤーから作られています。
| プロパティ | 役割 |
|---|---|
| 明るい影 (rgba(255,255,255,0.7)) | テキストの片端に当たる光源をシミュレート |
| 暗い影 (rgba(0,0,0,0.5)) | 反対側の端に落ちる影をシミュレート |
| オフセットの方向 | EmbossedとEngravedで反転し、3D錯覚を切り替える |
| 強度 | 明るい影と暗い影がテキストからどれだけオフセットされるかを制御 |
| 色の一致 | 平坦なコントラストを隠すためにテキストと背景色を近づけて設定 |
関連ツール
他のCSSジェネレーターもぜひお試しください。
→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator
日本のWebデザインでの活用シーン
日本のコーポレートサイトや老舗ブランドのサイトでは、金属プレートや石材に刻印されたような重厚感のあるロゴ表現が今も根強い人気があります。以前はこうした質感を出すために毎回Photoshopで画像を書き出し、レスポンシブ対応のたびにサイズ違いの画像を用意する手間がかかっていましたが、text-shadowだけで実装すれば、テキストとして扱えるためSEOやアクセシビリティにも有利で、画面サイズが変わっても文字が滲むことなく表示されます。
また、和菓子店や旅館サイトのような『和』のテイストを持つデザインでは、木彫りの看板や漆器に彫り込まれた文字のような質感を再現したいという要望がよくあります。エングレーブスタイルに背景色と近い落ち着いた色（深緑や臙脂色など）を組み合わせることで、画像を使わずに上品な彫り込み感を演出できます。
よくある質問
EmbossedとEngravedの違いは何ですか?
Embossedはテキストを背景から浮き出させて見せ、左上に明るい影、右下に暗い影を配置します。Engravedはこれを反転させ、代わりにテキストを背景に彫り込まれたように見せます。
なぜテキストと背景の色を近づけると効果が最もきれいに見えるのですか?
エンボス/エングレーブの錯覚は、テキストと背景のコントラストではなく、影のハイライトとシャドウのみに依存しています — そのため、テキストの色を背景色に近づける(または同じにする)と、通常最もきれいな仕上がりになります。
この効果はテキスト以外の要素にも使えますか?
このツールが生成するtext-shadowプロパティはテキストにのみ適用されます。形状やボタンで同様の効果を得るには、代わりに相当するbox-shadowの設定が必要です。
このツールは入力した内容を保存したり追跡したりしますか?
いいえ。CSSはすべてブラウザ内で生成されます — サーバーには何も送信・保存されません。
すべてのブラウザで動作しますか?
はい — text-shadowはChrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザで幅広くサポートされています。
背景が単色ではなくグラデーションや画像の場合でも効果は綺麗に見えますか?
エンボス・エングレーブ効果はテキスト色と背景色の近さに依存するため、背景がグラデーションや画像の場合は、その中の代表的な1色をテキスト色として選ぶと違和感を抑えやすくなります。背景の明暗差が大きい画像の上では、光源の向きが不自然に見えることがあるため注意してください。
生成したCSSを見出し（h1やh2）だけでなく、ボタンのラベルにも使えますか?
はい。text-shadowはインライン・ブロックを問わずテキストを含む要素であればどこにでも適用できるため、ボタン内のラベルテキストにもそのまま使えます。ただしボタン自体の立体感（背景の凹凸）まで表現したい場合は、box-shadowを別途組み合わせる必要があります。
強度を上げすぎるとどうなりますか?
強度スライダーの値を大きくしすぎると、明るい影と暗い影のオフセットが離れすぎて、立体的な質感ではなく単なる二重の影として見えてしまいます。多くの場合、強度は控えめな値のほうが自然なエンボス・エングレーブ感を保てます。
日本語のフォントでも同じようにエンボス効果は綺麗に出ますか?
はい、text-shadowはフォントの種類を問わず適用されるため、日本語の漢字やひらがなにも同様に効果がかかります。ただし線が細い明朝体系のフォントでは、影の強度を強くしすぎると文字の輪郭が潰れて読みにくくなることがあるため、ゴシック体など線の太いフォントのほうが効果が分かりやすく出る傾向があります。