Aurora Text

文字の中をオーロラのような多色グラデーションがゆっくり流れるテキスト。background-clip:textとbackground-position移動だけで実装するCSSオンリーの定番。

CODE

HTML

<div class="demo-stage at-stage"><span class="at-text">AURORA</span></div>

CSS

.at-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.at-text {
  font-family:'Oswald',sans-serif; font-size:clamp(3rem,10vw,5rem); font-weight:600; letter-spacing:.05em;
  background: linear-gradient(115deg, #22d3ee 0%, #a78bfa 25%, #f472b6 50%, #34d399 75%, #22d3ee 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(167,139,250,.35));
  animation: at-flow 8s ease-in-out infinite;
}
@keyframes at-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .at-text {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

文字の中をオーロラのような多色グラデーションが流れるテキストをCSSだけで作って。linear-gradient(115deg, シアン→紫→ピンク→緑→シアン) を background-size:300% 300% で拡大し、-webkit-background-clip:text と color:transparent で文字に切り抜く。@keyframes で background-position を 0%→100%→0% に8秒かけて往復させると波のように流れる。drop-shadow でほのかな発光を足すとオーロラ感が増す。ヒーロー見出し・ブランドロゴ向け。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。

オーロラテキスト（Aurora Text）とは

文字の内部をオーロラのような寒色〜暖色の多色グラデーションがゆっくりと流れるテキストエフェクト。background-clip:text で文字の形にグラデーションを切り抜き、background-position をアニメーションさせるだけで実装できる、JavaScript不要のCSSオンリー表現です。

単色では埋もれがちなヒーローセクションの見出しや、テック系プロダクトのブランドワードに使うと画面の主役が明確になります。グラデーションの端と端を同じ色にしておくとループの継ぎ目が見えず、滑らかに循環し続けるのがポイントです。

よくある質問

オーロラテキスト（Aurora Text）はどんな効果ですか？

文字の中をオーロラのような多色グラデーションがゆっくり流れるテキストエフェクトです。ヒーローセクションの見出しやブランドワードなど、画面の主役を演出したい場面に向きます。

Aurora TextはCSSだけで実装できますか？

はい。background-clip:text と @keyframes による background-position の移動だけで実装でき、JavaScriptは不要です。本ページのコードをコピーするだけで動作します。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Aurora Text

RELATED EFFECTS

オーロラテキスト（Aurora Text）とは

よくある質問