テキストシャドウ（text-shadow） ジェネレーター
サンプル一覧（見本）。作りたいもののイメージに一番近いものを選択して下さい。 選択後に編集することが可能です。
※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。 プレビューのテキスト（（改行）タグが使えます）- SHADOW!
- SHADOW!
- SHADOW!
- SHADOW!
- SHADOW!
- SHADOW!
- SHADOW!
- SHADOW!
ツールを使用するにあたっての注意
- 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
- ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール（デベロッパーツール）などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
- 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください
ツールの使い方について
・ツールの使い方が今いち分からない ・色々な活用の方法を知りたい ・各項目の詳細を知りたい という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。
ジェネレーターの一覧
CSS グラデーション ジェネレーター ボタンジェネレーター ボックスシャドウ（box-shadow） ジェネレーター テキストシャドウ（text-shadow） ジェネレーター 枠線・境界線（border） ジェネレーター CSS Filter ジェネレーター 三角形 ジェネレーター CSS Backdrop-filter ジェネレーター CSS Transform（変形） 2D / 3D ジェネレーター CSS Transition（アニメーション） ジェネレーター CSS animation ジェネレーターその他ツールの一覧
文字数カウンターツールに関連する解説動画の一覧
- text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？
- なんとなくで使っていませんか？カラーコード（#fffなど）を徹底解説！
各CSSプロパティの説明
text-shadow text-shadowプロパティは文字（テキスト）に影を設定することができます。各値（value）は、次のように指定することができます。text-shadow: 水平方向のずらし量 垂直方向のずらし量 影のぼかし量 影の色
記述例） text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)
水平方向のずらし量 垂直方向のずらし量 の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。 水平方向のずらし量 垂直方向のずらし量 影のぼかし量 についてはそれぞれ初期値が０です。 影の色 は指定されなければ、ユーザーエージェントが選択した色が使われます。その為、クロスブラウザ対応を考慮した場合、明示的に定義する必要があります。
影は複数指定することができます。複数指定したい際は、カンマ「，」で区切って指定します。最初に指定された影が最も手前に来ます。記述例） text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;
positionプロパティは要素がどのように配置されるかを設定します。static（初期値）以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。また、static以外の値が指定されているように関しては、z-index（重なり順）を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー（手前のレイヤー）として表示されます。
- relative：指定してもその要素自体の位置は変わりませんが、static（初期値）と違い、topなどの指定がされていた場合にその影響を受けます。
- absolute：祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
- fixed：画面を基準に相対的に要素を配置します。スクロールしても位置が変わりません。
- sticky：fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。
まず、一番よく目にするHEXは（hexadecimal number/ヘキサデシマル）で、16進数による色の表現方法です。#1234ab のような形で表現されます。#以降の6桁は1~2桁目が赤（red）、3~4桁目が緑（green）、5~6桁目が青（blue）の値です。各数値の色の強さにより様々な色を表現します。それぞれの2桁が同じ数値の場合には3桁での表現をすることができます。例えば、#aa9933の場合#a93とすることが可能です。透明度もHEXで指定したい場合は、8桁の数値で表現することができ、7~8桁目で同じく16進数で表現します。80%の透明度を指定したければ、#aa9933CC のように指定します。
RGBはHEXと同じく、赤（red）・緑（green）・青（blue）で色を表現することができるものです。各値は0 ~ 255の範囲で指定することができ、rgb( 赤の値 , 緑の値 , 青の値 ) のような形で表現します。記述例）rgb(10, 50, 220)透明度を指定したい場合には、rgba( 赤の値 , 緑の値 , 青の値 , 透過度(alpha) ) のような形で指定することができます。alpha値は0~1で指定することができ、例えばrgba(0, 0, 255, .5) のような形で指定することが可能です。
- Hue（色相）：基本的には 0 ~ 360 の間で指定することができます。この範囲を超える数値を指定した場合は、周回して考えられる為、例えば380を指定した場合には20と同じ指定となります。
- Saturation（彩度）：0 ~ 100% の間で指定することができます。100%に近づくほど色が鮮やかになります。逆に0%に近づくほどモノクロ（白黒）になっていきます。
- Lightness（明度）：0 ~ 100% の間で指定することができます。100%に近づくほど明るくなります。逆に0%に近づくほど暗くなっていきます。