動くグラデーション文字のCSSジェネレーター
グラデーションの色が流れるように変化し続ける、視認性の高いテキストエフェクトを生成します。
プレビュー
|
<span class="animated-gradient-text">{{text_content}}</span>.animated-gradient-text {
font-size: {{font_size}}px;
background: {{gradient_style}};
background-size: {{bg_size}};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-flow {{duration}}s linear infinite;
display: inline-block;
white-space: nowrap;
}
@keyframes gradient-flow {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}機能、使い方
- 背景クリップ:
background-clip: textを利用して、文字の形状のみをグラデーションで「切り抜く」モダンな演出を行います。 - 速度のカスタマイズ: アニメーションの周期（秒数）を調整することで、ゆっくりとした上品な変化から、エネルギッシュな高速変化まで制御可能です。
- 滑らかなループ: 背景画像をループさせるように移動させることで、途切れのない美しいグラデーションフローを実現します。
デザインのポイント
よりリッチに見せるには、font-familyにインパクトのある太めのフォント（例：Google Fonts の Montserrat や Noto Sans JP
の厚めなウェイト）を指定することをお勧めします。
速度を 5s 以上に設定すると、落ち着いた高級感のあるサイトに、1s〜2s 程度に設定すると目を引くキャンペーンサイトに適した演出になります。
