Design Atlas
한국어
✦ Visual effects

Aurora text

오로라 텍스트

A slow-flowing, blending teal-purple-pink gradient — an aurora palette — filled inside glyph shapes, with a soft glow of the same colours bleeding behind.

Also known as: Aurora gradient textNorthern-lights text
···
html
<h1 class="glow" aria-hidden="true">Aurora</h1><h1 class="aurora">Aurora</h1>
css
.aurora,.glow{position:relative;margin:0;grid-row:1;grid-column:1;font-size:clamp(38px,10vmin,66px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,#22d3ee,#a855f7 35%,#f472b6 60%,#34d399 85%,#22d3ee);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 9s ease-in-out infinite}
.glow{position:absolute;inset:0;display:grid;place-items:center;filter:blur(18px);opacity:.75}
h1{display:grid;place-items:center}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

The mechanics match gradient text: background-clip: text confines the gradient to the glyph shapes. What differs is the colour palette and motion — aurora uses a wide spread of hues (teal, purple, pink, green) rather than one or two adjacent brand colours, laid across a large background-size and animated very slowly (10s+) so the colours read as blending rather than cycling.

Duplicate the same text, blur it slightly, and place it behind the sharp copy, and light appears to bleed out from the letters. The front copy stays crisp for reading; the blurred one behind is purely atmosphere.

Where gradient text flows crisply through two or three brand colours, aurora text uses more hues, moves slower, and adds a glow — aiming for a dreamier mood rather than a punchy brand statement.

When to use

Use for an AI product's hero title or premium-feature copy. The glow only reads on a dark background, and it shouldn't be used for body text — legibility suffers.