Skip to main content
Penguin Toolsペンギンツールズ

CSSテキストシャドウ生成器

CSSのtext-shadowをプレビューしながら生成するツール。 複数シャドウの重ね合わせやネオン・エンボスのプリセット付き。

プリセット

テキスト設定

16px120px
#333333
#F1F5F9

シャドウレイヤー

レイヤー 1
#000000

プレビュー

Shadow Text

生成されたCSS

text-shadow: 2px 2px 4px #000000;

完全なスニペット

.text-shadow-effect {
  color: #333333;
  font-size: 48px;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px #000000;
}
このツールをシェア
📖

使い方

Step 1

テキスト入力

テキスト入力

プレビュー用のテキストを入力

Step 2

パラメータ調整

パラメータ調整

オフセット・ぼかし・色を調整

Step 3

コピー

コピー

CSSコードをコピーして使用

✨

このツールの特徴

リアルタイムプレビュー

テキストシャドウの効果をリアルタイムで確認

複数シャドウ

複数のテキストシャドウを重ねて適用

プリセット

ネオン・エンボスなどのプリセット

❓

よくある質問

text-shadowはテキストの文字自体に影を付け、box-shadowは要素のボックスに影を付けます。

🔗関連ツール

🎨
デザイン

カラーコード変換器

HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。

🎨
デザイン

カラーピッカー

カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。

🎨
デザイン

画像色抽出器

画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。

🎯
デザイン

画像平均色取得

画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。

🌈
デザイン

CSSグラデーション生成器

CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。

🔲
デザイン

CSSボックスシャドウ生成器

CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。