그레인 얹은 오로라 그라디언트 랜딩 부품 9개
오로라 그라디언트는 어두운 배경 위에서 흐릿한 색 덩어리 여러 개가 오로라처럼 번지고, 그 위에 필름 그레인이 얹히는 랜딩 페이지 스타일입니다. AI가 만든 그래픽이 다 비슷하게 매끈해지자 디자이너들은 일부러 그레인을 남겨 사람 손이 닿았다는 티를 냅니다.
아래 원페이지는 이 아홉 개 부품을 실제로 이어 붙인 결과물입니다. 위에서부터 훑으면서 오로라가 어디서 진해지고 어디서 옅어지는지 먼저 확인하세요.
아홉 개 부품 각각도 따로 뜯어 격자로 모았습니다. 순서는 인기순이 아니라 방문자가 실제로 화면을 훑는 흐름 — 시선을 끌고, 기능을 훑고, 가격을 보고, 후기로 믿고, 마지막에 누르는 순서 — 그대로입니다.
자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip
- 01 움직이는 오브 배경 히어로
- 02 투명 내비
- 03 그라디언트 보더 카드
- 04 그라디언트 아이콘 리스트
- 05 강조 플랜 그라디언트
- 06 블러 배경 인용
- 07 전면 오로라 밴드
- 08 그레인 다크 푸터
- 09 그라디언트 버튼·글로우 포커스
01히어로
블러 처리한 색 덩어리 세 개가 헤드라인 뒤에서 서로 다른 박자로 떠돌며 겹칩니다. 카드 자체는 짙은 잉크색 고정, 오로라는 그 위를 지나가는 빛으로만 씁니다.
.hero-a__orb { position: absolute; width: 46%; aspect-ratio: 1;
border-radius: 50%; filter: blur(28px); opacity: .85; }
.hero-a__orb--1 {
background: radial-gradient($color 0%, $color 35%, transparent 68%);
top: -10%; left: 4%;
animation: driftA $duration steps(4, jump-none) infinite;
}
@keyframes driftA {
0% { transform: translate(0,0) rotate(0deg); }
50% { transform: translate(22px, 16px) rotate(20deg); }
100% { transform: translate(0,0) rotate(0deg); }
}
02내비게이션
메뉴 배경이 완전히 투명에 가깝고, 안쪽에 반투명 잉크 유리 하나만 깔려 있습니다. 활성 항목을 가리키는 필은 항목 세 개를 퍼센트로 3등분해 그 폭만큼만 옮겨 다닙니다.
.nav-a {
background: rgba($stage-ink, .38);
backdrop-filter: blur(10px);
border: 1px solid rgba($stage-paper, .18);
}
.nav-a__pill {
position: absolute; top: $sp-1; bottom: $sp-1; left: $sp-1;
width: calc((100% - #{$sp-1 * 2}) / 3);
border-radius: $r-pill; background: $color;
animation: pillSlide $duration $ease-spring infinite;
}
03카드 격자
카드 테두리 자리에만 오로라 3색 줄무늬가 보이도록 잘라내고, 그 줄무늬를 계속 흘려보냅니다. 안쪽 카드는 짙은 잉크색으로 고정해 시선이 테두리에 머무릅니다.
.card-a::before {
content: ""; position: absolute; inset: 0;
border-radius: $r-card; padding: $sp-1;
background: repeating-linear-gradient(120deg,
$color 0 26px, $stage-yellow 26px 52px,
$stage-orange 52px 78px, transparent 78px 104px);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: sweep $duration linear infinite;
}
@keyframes sweep { to { background-position: 208px 0; } }
04기능 목록
기능마다 원형 배지 하나씩을 두고, 배지 안 그라디언트만 좌우로 흐르게 합니다. 목록 전체가 움직이면 산만하지만 작은 점 하나만 흐르면 시선을 자연스럽게 붙잡습니다.
.feat-a__icon {
width: $sp-8; height: $sp-8; border-radius: $r-pill;
background: linear-gradient(120deg, $color, $stage-yellow, $stage-orange, $color);
background-size: 200% 100%;
animation: iconFlow $duration ease-out infinite;
}
@keyframes iconFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
05가격
추천 플랜 카드에만 오로라 그라디언트가 숨 쉬듯 밝아졌다 옅어지고, 위치도 살짝 오갑니다. 일반 플랜은 옅은 유리 카드로 남겨 대비를 만듭니다.
.pricing-a__plan--pro::before {
content: ""; position: absolute; inset: -20%;
background:
radial-gradient(circle at 30% 20%, rgba($color, .9), transparent 60%),
radial-gradient(circle at 75% 80%, rgba($stage-orange, .85), transparent 60%);
animation: breathe $duration steps(4, jump-none) infinite;
}
@keyframes breathe {
0%, 100% { opacity: .3; transform: translate(0, 0); }
50% { opacity: 1; transform: translate(-8%, 8%); }
}
06후기
반투명 유리 인용 카드 뒤에서 블러 처리한 오로라 덩어리 두 개가 천천히 떠돕니다. 카드 앞면은 흐림 처리를 살짝만 줘서 글자는 또렷하게, 배경만 은은하게 비칩니다.
.test-a__orb {
position: absolute; width: 50%; aspect-ratio: 1;
border-radius: 50%; filter: blur(20px);
}
.test-a__orb--1 {
background: radial-gradient($subject-blue 0%, $subject-blue 45%, transparent 72%);
top: -8%; left: -8%;
animation: floatA $duration steps(4, jump-none) infinite;
}
.test-a__card {
background: rgba($stage-ink, .22);
backdrop-filter: blur(4px);
border: 1px solid rgba($stage-paper, .18);
}
07CTA 띠
화면 폭 전체를 덮는 밴드 하나에 오로라 5색이 천천히 흘러가고, 그 위에 정지된 그레인이 얹혀 화면이 인쇄물처럼 보입니다. 밴드 전체가 피사체라 누적면적(변한 픽셀의 면적)이 9개 중 3위(36.97%)로 넓은 축에 듭니다.
.cta-a {
background: linear-gradient(120deg,
$stage-ink, $color, $stage-orange, $stage-yellow, $stage-ink);
background-size: 300% 100%;
animation: flow $duration linear infinite;
}
@keyframes flow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
08푸터
필름 그레인을 프레임마다 다른 자리로 점프시켜 지지직거리는 질감을 만듭니다. 부드러운 곡선 대신 steps()를 쓴 게 핵심이라, 이 항목이 이 편에서 유일하게 그레인 자체가 애니메이션의 주인공입니다.
.footer-a::before {
content: ""; position: absolute; inset: 0;
opacity: .45; mix-blend-mode: overlay;
background-image:
radial-gradient(rgba($color, .7) .6px, transparent .6px),
radial-gradient(rgba($stage-ink, .7) .6px, transparent .6px);
background-size: 3px 3px, 5px 5px;
animation: grainJump $duration steps(6, jump-none) infinite;
}
@keyframes grainJump {
0% { background-position: 0 0, 0 0; }
40% { background-position: 5px -3px, -4px 6px; }
100% { background-position: 0 0, 0 0; }
}
09버튼·입력
버튼 안 그라디언트는 손을 올렸을 때만 흐르고, 입력창은 포커스 링 대신 이중 box-shadow 글로우로 늘 은은하게 빛납니다. 아홉 개 중 유일하게 호버로 발동하는 항목이라 캡처할 땐 is-demo 클래스로 강제로 재생시켰습니다.
.bi-a__btn {
background: linear-gradient(120deg, $color, $stage-orange, $subject-blue, $color);
background-size: 260% 100%;
}
.bi-a__btn:hover, .bi-a__btn:focus-visible {
animation: shift $duration ease-out infinite;
}
.bi-a__input {
box-shadow: 0 0 0 2px rgba($subject-blue, .55), 0 0 16px rgba($stage-orange, .45);
}
tailwind.config 커스텀
아홉 개 부품이 재사용하는 색·반경 값은 이 설정 하나뿐이라, 오로라 세 색을 여기서 바꾸면 전부 같이 따라옵니다 — 단 두 가지는 예외입니다. 그레인 진하기는 이 파일에 없고 원페이지 빌드 자체의 <style> 블록에 opacity 값으로 박혀 있습니다. 그리고 bg-aurora 그라디언트 유틸리티는 위 colors를 참조하지 않고 같은 hex 세 개를 리터럴로 다시 적어둔 상태라, 색을 여기서 바꿔도 이 유틸리티는 저절로 안 바뀝니다 — 두 곳을 같이 고쳐야 합니다.
theme: {
extend: {
colors: {
ink: "#17141a", cream: "#fff7e6", paper: "#ffffff",
blue: "#2f6df6", yellow: "#ffd23f", orange: "#ff4d1f",
},
borderRadius: { tile: "16px", control: "12px", pill: "999px" },
backgroundImage: {
aurora: "linear-gradient(120deg, #17141a, #2f6df6, #ff4d1f, #ffd23f, #17141a)",
},
},
},
바이브코딩 프롬프트
위 설정 값을 프로젝트에 붙여 넣은 뒤, Claude Code나 Cursor에는 아래 조각만 던져도 충분합니다. 조각을 이어붙인 전체 지시문은 zip 속 prompt.md에서 확인할 수 있습니다.
배경은 ink 하나. 강조할 자리에만 blur(40~60px) 처리한 blue·yellow·orange 덩어리
2~3개를 겹쳐 오로라처럼 번지게 한다. 배경 전체를 그라데이션으로 칠하지 않는다.
어두운 표면마다 옅은 그레인(radial-gradient 점 패턴, opacity .3 안팎)을 얹는다.
이미지 파일이 아니라 CSS 로만 만든다.
이 지시를 page/index.html에 그대로 반영한 다음 1280px 너비 화면 전체를 캡처한 것이 아래 스크린샷입니다.
어디서 깨지는가 — 함정
오로라 덩어리를 부드러운 ease 곡선으로만 움직이면 블러 뒤에서 프레임 사이 변화가 너무 작아 애니메이션이 있어도 없는 것처럼 보이는 순간이 생깁니다. 05번 추천 플랜을 처음 만들었을 때 opacity를 .55에서 1로만 오가게 했더니 렌더 측정에서 변한 픽셀의 강도가 0으로 나왔고, 진폭을 .3에서 1로 넓히고 타이밍을 steps(4, jump-none)로 바꾸고서야 여섯 프레임 이상에서 잡혔습니다. <ul>이나 <figure>·<blockquote> 같은 시맨틱 태그를 그대로 쓰는 것도 함정입니다. 브라우저 기본 여백이 남아 있으면 320px 폭에서 세로로 넘치는데, 04번 기능 목록과 06번 후기 카드가 실제로 이 문제를 겪었고 margin: 0을 명시적으로 넣은 뒤에야 스크롤바가 사라졌습니다. 이번 편의 부품 아홉 개와 원페이지 전체 소스를 묶은 압축 파일은 비밀번호 u7eepwrp를 넣어야 열리며, 버튼을 누르면 바로 내려받습니다.
마지막 함정은 대비입니다. 오로라 덩어리의 채도를 낮추거나 배경을 밝은 색으로 바꾸면 그레인과 겹쳐 글자 대비가 무너지기 쉬우므로, 글자가 올라가는 자리는 항상 잉크색 고정 배경 위에 두는 편이 안전합니다.
접근성
09번 버튼의 그라디언트 흐름과 01·06·07·08번의 오브·CTA 흐름·그레인 점프는 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리로 감쌌고, 동작 줄이기를 켠 방문자에게는 정지된 그라디언트와 정지된 그레인만 보입니다. 03번 카드 테두리처럼 mask-composite를 쓰는 항목은 MDN mask-composite 문서를 참고해 구형 사파리용 -webkit-mask-composite: xor도 함께 넣었습니다. 인용문·버튼 글자는 전부 잉크색 배경 위 흰 글자나 크림색 배경 위 잉크색 글자로만 써서 그라디언트가 흘러가는 동안에도 대비가 무너지지 않게 했습니다.
이 스타일 말고 다른 홈페이지 트렌드도 궁금하다면 디자인 트렌드 카테고리를 훑어보시고, 이 사이트 전반의 성격은 소개 페이지에서 확인할 수 있습니다.
FAQ
오로라 그라디언트는 CSS만으로 만들 수 있나요?
네, 이 편의 부품 아홉 개는 전부 JS 0줄입니다. 09번 버튼의 호버 반응도 :hover·:focus-visible 의사 클래스만으로 처리했고, 자바스크립트는 데모를 캡처할 때 강제로 애니메이션을 재생시키는 용도로만 잠깐 씁니다.
그레인 텍스처는 이미지 파일을 써야 하나요?
아니요. 이 편의 그레인은 아주 작은 반지름의 radial-gradient 점 두 개를 겹치고 background-size를 3~5px로 촘촘하게 반복하는 방식이라 이미지 요청이 한 번도 없습니다. 08번 푸터처럼 점의 위치를 프레임마다 옮기면 필름 그레인 특유의 지지직거리는 느낌도 CSS만으로 흉내 낼 수 있습니다.
어두운 배경이 아니어도 오로라 그라디언트를 쓸 수 있나요?
밝은 배경 위에서도 오로라 덩어리 자체는 그대로 쓸 수 있지만, 이 편의 아홉 개 부품은 전부 잉크색 짙은 배경을 기본값으로 삼았습니다. 밝은 배경에서는 덩어리의 투명도를 낮추고 그레인의 혼합 모드를 overlay 대신 multiply로 바꿔야 같은 정도의 질감이 유지됩니다.