縁取り文字・白抜き文字のCSS生成
CSSのtext-shadowで縁取り文字、白抜き文字を再現できます。
文字や縁の色を直感的に変えられ、縁は太さやぼかし具合を調整し影のソースコードを簡単に生成できます。
影を付ける以外にも影のアニメーションやSVGによる文字の縁取りも可能です。
縁取り文字・白抜き文字のCSS生成とは
このツールは、文字を「縁取り（アウトライン）」したり「白抜き」したりするCSSコードをブラウザで簡単に作ってくれる無料ジェネレーターです。
文字の色、縁の色、縁の太さやぼかしなどを設定すると、それに応じたCSSのコードを出してくれるので自分で手書きするより手軽！
「白抜き文字」とは、文字の中を透明または背景色にして、縁だけで文字を形作るデザインのことです。
主な機能・特徴
| 縁取り文字／白抜き文字の CSS 自動生成 | 文字の縁（輪郭線）の太さ・色・文字色などを設定して、それに対応するCSSコードを取得できます |
| ぼかしの設定が可能 | 縁にぼかしを入れて柔らかい縁取りができるオプションもあります |
| 簡単な操作画面 | 設定項目が分かりやすく、色選びや太さのスライダーなど直感的な操作ができるようになっています |
使い方
インストール、ログイン不要で簡単に使えます。
①文字色 (文字本体の色) を設定
文字の色を選びます。白や黒、その他自分のデザインに合う色を選択。
白抜きにしたいときは 「transparent」 や背景色に近い色を選ぶこともあります。
②縁の色を設定
文字の輪郭線（縁）の色を選びます。
文字色とコントラストが出る色を選ぶと見やすくなります。
③調整
縁取りの太さやぼかしを設定します。
文字サイズや使われるフォントによっては、太すぎると文字が潰れて見えることがあるので注意！
活用例
- 見出し（タイトル）を目立たせたいときや視認性をアップしたいとき
- バナーや広告素材で文字を白抜きにして背景画像や彩色背景と組み合わせたいとき
- 背景画像が複雑な場合に文字を透過・縁取りすることで文字が読みやすくなるように工夫したいとき
- デザイン案やモックアップでクライアントにいくつか文字スタイルのサンプルを見せたいときに色／縁／ぼかしなどを変えて比較できる
注意点
※使用素材（文字フォント等）は自分の環境に依存するためフォントがない環境では異なる見え方になる可能性があります
※特に古いブラウザやIEなどでは正しく表示されないことがあります
※文字が小さい、線が太すぎる、細いフォントを使っている場合など、縁の部分が潰れて文字が読みづらくなることがあります
※モバイルや小さな画面で文字のサイズが小さくなると縁が潰れやすいため、複数の画面サイズで確認して必要なら縁を細くしたり、ぼかしを弱めたりする必要があります
