CSS만으로 흐르는 아쿼라 그라데이션 배경

제작 과정

한 줄 요약

여러 색 블롭을 radial-gradient로 만들고 @keyframes로 떠다니게 해, JS 없이 CSS만으로 흐르는 오로라 배경을 만듭니다.

이럴 때 필요해요

히어로 섹션이나 로그인 화면에 밋밋한 단색 대신 생동감 있는 배경이 필요할 때, 이미지나 영상은 무겁고 제어가 어렵습니다. 블롭 그라데이션은 가볍고 색속도를 코드로 자유롭게 바꿀 수 있어 브랜드 톤에 맞추기 좋습니다.

어떻게 동작하나

각 블롭은 중심에서 투명으로 퍼지는 radial-gradient 원입니다.
@keyframes로 translatescale을 천천히 바꿔 떠다니게 하고, 블롭마다 시간을 다르게 줘 불규칙하게 만듭니다.
mix-blend-screen과 큰 blur로 겹치는 색이 자연스럽게 섞이고, 미세한 grain을 얹어 띠(banding)를 줄입니다.

놓치기 쉬운 것

blur가 크면 가장자리가 잘려 보이니 블롭을 컨테이너보다 크게, overflow는 hidden으로 둡니다.
그라데이션 띠가 보이면 grain 오버레이로 완화합니다.
prefers-reduced-motion 사용자에겐 애니메이션을 멈춰야 합니다.

이런 곳에 써요

히어로랜딩 배경, 로그인/가입 화면
카드배너의 은은한 동적 배경

import type { Metadata } from "next"; import { AuroraGradient } from "./-components/AuroraGradient"; export const metadata: Metadata = { title: "아쿼라 그라데이션 배경 (데모)", description: "여러 색 블롭을 겹쳐 천천히 떠다니게 한 오로라 배경. radial-gradient + @keyframes + mix-blend + blur. 팔레트 프리셋 · 속도 조절, prefers-reduced-motion 정지.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="min-h-[100dvh]"> <AuroraGradient /> </main> ); }