CSSテキストエフェクト ジェネレーター
テキストを入力して、本格的なネオングロー、3D押し出し、レタープレス、アウトライン、グラデーション塗りのCSSエフェクトをライブプレビュー。パラメータは本物の数式で計算され、CSSブロックをコピーできます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
多くのCSSテキストエフェクト集は固定プリセットを提供するだけですが、このジェネレーターは入力したテキスト上で、ユーザーのパラメータからCSSを構築します。エフェクト選択からネオングロー、3D押し出し、レタープレス/エンボス、アウトライン、グラデーション塗りを選び、そのエフェクト独自の操作子を調整すると、ライブプレビューと下のコピー用CSSブロックが変更のたびに更新されます。
3D押し出しエフェクトは特に注目です。選択した深度（積み重ねるレイヤー数）と角度に対し、レイヤーiは水平方向にi×cos(角度)、垂直方向にi×sin(角度)だけオフセットされます。これはJavaScriptで本物の三角関数を使って計算され、あらかじめ用意された角度のルックアップテーブルから読み取った値ではありません。45度ではcosとsinが同じ値になるため、全レイヤーで水平・垂直オフセットが等しくなります。角度スライダーを回せば、text-shadowレイヤー全体が文字の周りで実際に回転し、各レイヤーが少しずつ暗くなることで、光の当たった立体面を表現します。
ネオングローは選択した色でぼかし半径を大きくしながら4層のtext-shadowを重ね、オプションのちらつきも追加できます。ちらつきをオンにすると、ランダム化された不透明度の変化シーケンスを持つ@keyframesルールが生成されてライブアニメーションし、シャッフルボタンでキーフレームを一切手書きせずにパターンを振り直せます。アウトラインテキストは、対応ブラウザ向けに-webkit-text-strokeを適用し、さらに非対応ブラウザ向けの正直な8方向text-shadowフォールバックも付与します。どちらの行も理由を添えてコピーCSSに含まれます。グラデーション塗りはlinear-gradientをbackground-clip: textでテキスト形状にクリップする、現在では標準プロパティとして広くサポートされており、古いエンジン用の-webkit-接頭辞付き行も保持します。
すべてブラウザ内でローカルにレンダリングされ、入力したテキストが外部に送信されることは一切ありません。完成したCSSブロック（エフェクトに必要な@keyframesルールを含む）をスタイルシートへ直接コピーしてください。