CSS Text Shadowジェネレーター - テキストエフェクト オンライン作成
ビジュアルコントロールとリアルタイムプレビューでCSSテキストシャドウをデザイン。ネオングロー、3D、エンボス、ファイア、アウトラインなどのテキストエフェクトを作成できます。
よくある質問
CSS text-shadowとは？
CSS text-shadowは、テキスト文字にシャドウ効果を追加するプロパティです。要素のバウンディングボックスに適用されるbox-shadowとは異なり、text-shadowは個々のテキストグリフの輪郭に沿います。水平オフセット、垂直オフセット、オプションのぼかし半径、色を指定できます。カンマ区切りで複数のシャドウを組み合わせ、ネオングロー、3D深度、アウトライン、ファイアエフェクトなどを作成できます。
このテキストシャドウジェネレーターの使い方は？
スライダーで水平オフセット、垂直オフセット、ぼかし半径、不透明度を設定します。カラーピッカーでシャドウカラーを選択します。プレビューテキストでリアルタイムに効果を確認できます。ネオングローや3Dテキストなどの複雑な効果には複数レイヤーを追加してください。生成されたCSSコードをスタイルシートにコピーします。
text-shadowとbox-shadowの違いは？
text-shadowはテキストコンテンツのみにシャドウを適用し、各文字の形状に沿います。box-shadowは要素の矩形バウンディングボックスにシャドウを適用します。text-shadowはbox-shadowが提供するspread-radiusやinsetキーワードをサポートしません。タイポグラフィ効果にはtext-shadow、コンテナの高さ表現にはbox-shadowを使用してください。
ネオングローテキスト効果を作るには？
ネオングローは、ぼかし半径が増加する複数のゼロオフセットシャドウレイヤーと明るい色を使用します。例えば、#00ff00のようなネオンカラーで0 0 7px、0 0 10px、0 0 21px、0 0 42pxの3-4つのシャドウを重ねます。本ツールのネオングロープリセットはワンクリックでこの技法を自動適用します。
複数のテキストシャドウを使用できますか？
はい。CSS text-shadowプロパティはカンマ区切りの複数シャドウをサポートします。本ツールは最大10のシャドウレイヤーを追加でき、それぞれ独立したコントロールがあります。シャドウは前面から背面に適用されます。これにより3Dテキスト、アウトラインテキスト、ファイアエフェクトなどが可能になります。
3D/レトロテキスト効果を作るには？
3DまたはレトロテキストEffectは、オフセットが段階的に増加しぼかしがゼロの複数シャドウレイヤーを使用します。各レイヤーは前のレイヤーより1px多くオフセットされ、段階的に暗い色を使用します。本ツールのレトロ3Dプリセットは5つの重ねたレイヤーで自動作成します。
デザインデータは安全ですか？
はい。本ツールはブラウザ内で完全に動作します。データはサーバーに送信されません。シャドウ設定、プレビューテキスト、すべてのカスタマイズはデバイス上に保持され、完全なプライバシーが保証されます。
コード例
// Generate text-shadow CSS from parameters
function generateTextShadow(layers) {
return layers.map(layer => {
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Generate neon glow effect
function generateNeonGlow(color, layerCount = 4, maxBlur = 42) {
const shadows = [];
for (let i = 0; i < layerCount; i++) {
const progress = (i + 1) / layerCount;
const blur = Math.round(maxBlur * progress);
const opacity = (1 - progress * 0.6).toFixed(1);
const { r, g, b } = hexToRgb(color);
shadows.push(`0 0 ${blur}px rgba(${r}, ${g}, ${b}, ${opacity})`);
}
return shadows.join(', ');
}
// Usage
const shadow = generateTextShadow([
{ offsetX: 2, offsetY: 2, blur: 4, color: '#000000', opacity: 0.5 }
]);
console.log(`text-shadow: ${shadow};`);
// Output: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);