디자인 아틀라스
EN
✦ 시각 효과

오로라 텍스트

Aurora text

청록·보라·핑크가 극광처럼 천천히 흐르고 섞이는 그라데이션을 글자 모양 안에 채우는 기법. 뒤로는 같은 색의 은은한 발광이 함께 번집니다.

다른 이름: 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%}}

그라데이션 텍스트와 기본기는 같습니다: background-clip: text로 그라데이션을 글자 모양 안에만 가둡니다. 다른 점은 색 구성과 움직임입니다 — 오로라는 서로 인접한 한두 색이 아니라 청록·보라·핑크·초록처럼 넓은 색상 스펙트럼을 넓은 background-size 위에 배치하고, 아주 느리게(10초 이상) background-position을 흘려보내 "섞인다"는 인상을 줍니다.

여기에 같은 텍스트를 살짝 흐리게(blur) 복제해 뒤에 겹치면, 글자에서 빛이 새어 나오는 듯한 발광이 더해집니다. 앞쪽 선명한 텍스트는 읽는 용도, 뒤쪽 흐린 복제본은 분위기용으로 역할이 나뉩니다.

그라데이션 텍스트가 브랜드 컬러 두세 개로 또렷하게 흐르는 쪽이라면, 오로라 텍스트는 색이 더 많고 흐름이 느리며 발광까지 곁들여 몽환적인 무드에 가깝습니다.

언제 쓰나

AI 제품의 히어로 타이틀, 프리미엄 기능 소개에 씁니다. 어두운 배경에서만 발광이 제대로 보이고, 본문 텍스트에는 가독성 문제로 쓰지 않습니다.