A dark hero with a very large headline. The second line is filled with a green, cyan, indigo and pink gradient that drifts in a slow loop, like northern lights, and a blurred copy of the same words sits behind it as a glow. A faint band of light moves across the top of the section. Under the headline are a short paragraph, three facts and a button. On phones the headline scales down and the facts stack above the button.
// Adapted from Magic UI (https://magicui.design/docs/components/aurora-text)
// Copyright (c) Magic UI. MIT License: https://we.inc/components/licenses
import type { ReactNode } from "react";
import { ArrowRight } from "lucide-react";
const aurora = ["#34d399", "#22d3ee", "#818cf8", "#e879f9"];
const facts = [
{ label: "Season", value: "September to March" },
{ label: "Group size", value: "Eight guests" },
{ label: "Three nights from", value: "$1,460" },
];
/**
* Text filled with a slow, drifting gradient. A blurred copy underneath
* makes it glow. Screen readers get the plain words once.
*/
function AuroraText({ children, colors = aurora, speed = 1 }: { children: ReactNode; colors?: string[]; speed?: number }) {
const fill = {
backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
animationDuration: `${10 / speed}s`,
};
return (
<span className="relative inline-block">
<span className="sr-only">{children}</span>
<span aria-hidden="true" className="aurora-gradient-headline-text-drift absolute inset-0 bg-clip-text text-transparent opacity-70 blur-2xl" style={fill}>
{children}
</span>
<span aria-hidden="true" className="aurora-gradient-headline-text-drift relative bg-clip-text text-transparent" style={fill}>
{children}
</span>
</span>
);
}
export default function AuroraGradientHeadlineText() {
return (
<section className="relative overflow-hidden bg-black px-5 py-20 text-white sm:px-6 sm:py-28">
<style>{`
@keyframes aurora-gradient-headline-text-drift {
0%, 100% { background-position: 0% 50%; }
25% { background-position: 50% 100%; }
50% { background-position: 100% 50%; }
75% { background-position: 50% 0%; }
}
@keyframes aurora-gradient-headline-text-sky {
0%, 100% { transform: translate3d(-4%, 0, 0) scaleY(1); opacity: 0.5; }
50% { transform: translate3d(4%, -6%, 0) scaleY(1.25); opacity: 0.8; }
}
.aurora-gradient-headline-text-drift {
background-size: 200% 200%;
animation: aurora-gradient-headline-text-drift 10s ease-in-out infinite;
}
.aurora-gradient-headline-text-sky {
animation: aurora-gradient-headline-text-sky 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.aurora-gradient-headline-text-drift,
.aurora-gradient-headline-text-sky { animation: none; }
}
`}</style>
<span aria-hidden="true" className="aurora-gradient-headline-text-sky pointer-events-none absolute -top-40 left-0 h-80 w-full bg-gradient-to-r from-emerald-500/30 via-cyan-500/20 to-fuchsia-500/30 blur-3xl" />
<span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<div className="relative mx-auto max-w-5xl">
<p className="text-sm font-semibold uppercase tracking-widest text-emerald-300">Kestrel Lodge, 69 degrees north</p>
<h1 className="mt-6 text-5xl font-semibold leading-none tracking-tighter sm:text-7xl lg:text-8xl">
See the sky
<br />
<AuroraText>come alive.</AuroraText>
</h1>
<p className="mt-8 max-w-xl text-lg leading-8 text-zinc-300">Six glass-roofed cabins on a frozen fjord, far from any street light. A guide wakes you when the lights start, whatever the hour.</p>
<dl className="mt-12 grid gap-6 border-t border-white/10 pt-8 sm:grid-cols-[repeat(3,auto)_1fr] sm:items-end sm:gap-12">
{facts.map((f) => (
<div key={f.label}>
<dt className="text-xs uppercase tracking-widest text-zinc-400">{f.label}</dt>
<dd className="mt-2 text-lg font-medium text-white">{f.value}</dd>
</div>
))}
<div className="sm:justify-self-end">
<a href="#" className="group inline-flex h-12 items-center gap-2 rounded-full bg-white px-6 text-sm font-semibold text-black transition hover:bg-emerald-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black">
Check winter dates
<ArrowRight aria-hidden="true" className="h-4 w-4 transition-transform group-hover:translate-x-1" />
</a>
</div>
</dl>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/aurora-gradient-headline-text.json
The text has a diagonal gradient of several colours as its background, clipped to the letters. The background is twice the size of the text, and a keyframe moves its position around four points in a loop, so different colours pass through the letters over time.
One copy is hidden visually and read by assistive technology. One is the sharp gradient text. One is the same text blurred, placed behind to make the glow. The two visual copies are hidden from screen readers.
Yes, with darker colours. Replace the `aurora` array with tones such as `#059669`, `#0284c7`, `#4f46e5` and `#c026d3`, and lower the glow opacity, since a glow reads as a smudge on white.
The glow is one blurred text layer whose background position changes. It is light on modern devices. If you put the effect on many phrases at once, drop the glow layer on all but the main one.
The component is an inline block, so a long phrase wraps as one box. For the best result keep the phrase short and put the line break before it, as the demo does.
Adapted from Aurora Text in Magic UI, used under its open-source licence. Licences and credits
Related: Animated Gradient Text with Announcement Pill, Shimmering Chrome Gradient Headline, Aurora Background with Drifting Colour Bands.
More text effects or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.