오로라 그라디언트 배경, 동영상 아닌 CSS인 이유
요즘 링크트리나 개인 포트폴리오 홈페이지 배경에서 오로라처럼 은은한 색이 천천히 번지며 움직이는 화면을 본 적 있을 겁니다. 동영상을 재생하는 것처럼 보이지만 실제로는 몇 줄짜리 CSS가 그라디언트 색상 덩어리를 천천히 회전시키는 것뿐입니다. 원리를 알면 무거운 영상 파일 없이도 이 효과를 직접 코드로 재현할 수 있습니다.
요약 ① 오로라 배경은 흐리게 처리한 원형 그라디언트 여러 개가 서서히 회전하는 CSS 애니메이션입니다 ② 동영상 파일 대신 CSS로 만들면 로딩 지연 없이 몇 KB짜리 코드만으로 같은 효과를 낼 수 있습니다 ③ 색상 4개, 회전 시간, 밝기 모드만 정하면 직접 코드로 만들어 볼 수 있습니다
오로라 배경이 움직이는 이유 — 동영상이 아니라 회전하는 그라디언트입니다
오로라 배경은 하나의 큰 이미지나 영상이 흘러가는 게 아닙니다. 컨테이너 안에 화면보다 두 배 큰 레이어를 하나 두고, 그 안에 색이 다른 원형 그라디언트 4개를 서로 반대쪽 모서리에 배치한 뒤 전체에 강한 블러(흐림) 효과를 씌운 것입니다.
각 원은 중심에서 색이 진하다가 절반 지점부터 투명하게 사라지는 radial-gradient로 그려집니다. 여기에 80px 안팎의 blur 필터를 걸면 원의 경계가 완전히 사라지고 색과 색이 뭉게뭉게 섞인 안개 같은 형태만 남습니다.
이 흐릿한 레이어 전체를 0도에서 360도까지 아주 천천히(보통 15초 이상) 회전시키면, 색 덩어리들이 서로 스쳐 지나가듯 위치를 바꾸며 흘러가는 것처럼 보입니다. 레이어 크기를 컨테이너의 두 배로 잡고 중심을 -50%씩 밀어둔 덕분에, 한 바퀴를 돌아도 이음매나 반복 지점이 눈에 띄지 않습니다.
같은 느낌을 동영상(mp4)으로 만들면 해상도와 길이에 따라 파일 하나가 수 MB에서 수십 MB까지 나갑니다. 반면 이 원리를 CSS로 구현하면 색상 값과 애니메이션 규칙만 있으면 되므로 코드 용량이 몇 KB를 넘지 않고, 화면 크기가 달라져도 확대 없이 선명하게 늘어납니다.
확인하는 방법 — 동영상 없이 CSS만으로 오로라 배경 만들기
지금 보고 있는 사이트의 오로라 배경이 동영상인지 CSS인지는 브라우저 개발자 도구로 바로 확인할 수 있습니다. Elements(요소) 패널에서 배경이 있는 영역을 선택했을 때 video 태그가 보이면 영상이고, ::before·::after 같은 가상 요소에 animation 속성만 걸려 있다면 CSS로 만든 것입니다.
직접 만들 때는 컨테이너에 position: relative와 overflow: hidden을 걸어 배경색을 깔고, ::before(또는 ::after) 가상 요소에 -50%/-50% 위치로 200% 크기의 레이어를 얹습니다. 그 레이어에 서로 다른 색 4개로 radial-gradient를 겹쳐 그리고, 각각 화면의 네 모서리 쪽에 배치합니다.
여기에 filter: blur()로 흐림 정도를, animation으로 360도 회전 시간을 정하면 완성됩니다. 어두운 배경 위에서는 투명도를 조금 높게, 밝은 배경 위에서는 낮게 잡아야 색이 튀지 않고 은은하게 보입니다.
이 값들을 하나씩 손으로 넣고 브라우저를 새로고침하며 조합을 맞추는 건 시간이 꽤 걸립니다.
저희 도구로 확인하기. 색상 4개와 회전 시간, 밝기 모드를 바꿔가며 실시간 미리보기로 확인한 뒤 완성된 CSS·HTML 코드를 그대로 복사할 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 CSS·HTML 코드 바로 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 회전은 되는데 색이 안 보이고 밋밋함 | 밝은 배경에 어두운 배경용 투명도(opacity) 값을 그대로 써서 색이 배경에 묻힘 |
| 오로라가 흐릿하지 않고 원 모양 그대로 보임 | blur 필터 값이 너무 작거나 아예 빠짐 |
| 배경이 아예 안 움직임 | overflow: hidden이 없어 회전하는 레이어가 컨테이너 밖으로 밀려나 애니메이션 자체가 안 보임 |
| 모바일에서 화면이 버벅임 | blur 필터는 연산량이 커서 저사양 기기에서 프레임이 떨어질 수 있음 — 블러 값이나 회전 속도를 낮추면 완화됨 |
표에 정리된 것처럼, 문제의 대부분은 blur·opacity·overflow 세 값 중 하나가 빠졌거나 밝기 모드와 안 맞을 때 생깁니다.
정리
오로라 배경은 영상이 아니라, 흐리게 처리한 원형 그라디언트 레이어를 아주 천천히 회전시키는 CSS 애니메이션입니다. 색 4개와 블러, 회전 시간만 정하면 몇 줄짜리 코드로 같은 효과를 낼 수 있습니다.
동영상 파일 대신 이 방식을 쓰면 용량이 훨씬 가볍고 로딩 지연 없이 바로 재생되며, 화면 크기가 바뀌어도 화질 저하 없이 늘어납니다.
무료 · 가입 불필요 · 브라우저에서 CSS·HTML 코드 바로 복사
자주 묻는 질문
오로라 배경을 동영상 대신 CSS로 만들면 정확히 뭐가 더 좋나요?
가장 큰 차이는 용량입니다. 같은 느낌의 mp4 영상은 수 MB에서 수십 MB가 나가지만, CSS 코드는 몇 KB 수준이라 페이지 로딩이 그만큼 빨라집니다. 원과 그라디언트로 그려지는 방식이라 화면을 확대해도 계단 현상이나 화질 저하 없이 어느 해상도에서든 선명하게 보입니다.
오로라 애니메이션이 버벅이거나 느려 보이면 어떻게 해야 하나요?
blur 필터는 브라우저가 매 프레임 흐림 연산을 다시 계산해야 해서 저사양 기기나 브라우저 창이 클 때 부담이 큽니다. 블러 값을 살짝 낮추거나 회전 시간을 더 길게(느리게) 잡으면 눈에 띄는 버벅임 없이 부드럽게 보입니다.
색상은 꼭 4개를 써야 하나요?
4개는 화면의 네 모서리를 각각 채워 색이 고르게 섞이도록 잡은 기본 구성일 뿐, 정답은 아닙니다. 다만 색을 2~3개로 줄이면 특정 방향으로 색이 몰려 대비가 강해 보일 수 있으므로, 브랜드 컬러를 넣을 때는 서로 다른 톤 3개 이상을 섞는 편이 자연스럽습니다.