Text Shadow ジェネレーター

文字に様々な影をつけることができる、text-shadowの自動生成ツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
テキストのリアルタイム変更や、複数の影にも対応!

サンプル一覧(見本)。作りたいもののイメージに一番近いものを選択して下さい

※サンプル一覧の例を選択した場合、編集中のデータがある場合上書きされますので、ご注意ください。
  • SHADOW!
  • SHADOW!
  • SHADOW!
  • SHADOW!
  • SHADOW!
  • SHADOW!
  • SHADOW!
  • SHADOW!
SHADOW!
.original-text-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #000000;
  font-size: 50px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  font-weight: bold;
}

スタイルエディター

R
G
B
A

その他の指定

ツールの使い方が分からない方へ

・ツールの使い方が分からない!
・活用の方法を知りたい!
・各項目の詳細が知りたい!
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

使いやすさや分かりやすさなどは随時改善していく予定ですが、
現時点で最大限ツールを活用したい方などは解説をご活用ください。

各CSSプロパティの説明

text-shadow

text-shadowプロパティは文字(テキスト)に影を設定することができます。

各値(value)は、次のように指定することができます。
text-shadow: 水平方向のずらし量垂直方向のずらし量影のぼかし量影の色
記述例) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)

水平方向のずらし量垂直方向のずらし量影のぼかし量についてはそれぞれ初期値が0です。
影の色は指定されなければ、ユーザーエージェントが選択した色が使われます。その為、クロスブラウザ対応を考慮した場合、明示的に定義する必要があります。

影は複数指定することができます。
複数指定したい際は、カンマ「,」で区切って指定します。
記述例) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

position

positionプロパティは要素がどのように配置されるかを設定します。
top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
初期値はstaticです。

positionプロパティは次の値を設定することができます。

  • relative
  • absolute
  • fixed
  • sticky

記述例) position: relative;

relativeは指定してもその要素自体の位置は変わりません。

absoluteは、祖先要素にrelativeが指定されていた場合、指定されている一番近い祖先要素を基準に配置します。

fixedは画面を基準に相対的に要素を配置します。
スクロールしても位置が変わりません。

stickyは、fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。

positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください

ジェネレーターの一覧

その他ツールの一覧