GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

그레인 얹은 오로라 그라디언트 랜딩 부품 9개

· Godrich · 9종 · 8분 읽기

디자인 트렌드페이지 템플릿CSS만랜딩 페이지히어로 섹션CTA 버튼

오로라 그라디언트는 어두운 배경 위에서 흐릿한 색 덩어리 여러 개가 오로라처럼 번지고, 그 위에 필름 그레인이 얹히는 랜딩 페이지 스타일입니다. AI가 만든 그래픽이 다 비슷하게 매끈해지자 디자이너들은 일부러 그레인을 남겨 사람 손이 닿았다는 티를 냅니다.

아래 원페이지는 이 아홉 개 부품을 실제로 이어 붙인 결과물입니다. 위에서부터 훑으면서 오로라가 어디서 진해지고 어디서 옅어지는지 먼저 확인하세요.

새 창에서 원페이지 열기

메쉬 그라디언트로 만든 아홉 개 부품 각각도 따로 뜯어 격자로 모았습니다. 순서는 인기순이 아니라 방문자가 실제로 화면을 훑는 흐름 — 시선을 끌고, 기능을 훑고, 가격을 보고, 후기로 믿고, 마지막에 누르는 순서 — 그대로입니다. 같은 부드러움을 덩어리로 빚으면 클레이모피즘 랜딩 키트가 되고, 반대로 경계를 날카롭게 세우면 네오브루탈리즘 랜딩 부품이 그 맞은편에 섭니다.

움직이는 오브 배경 히어로01 hero-aurora 투명 내비02 nav-aurora 그라디언트 보더 카드03 card-grid-aurora 그라디언트 아이콘 리스트04 feature-list-aurora 강조 플랜 그라디언트05 pricing-aurora 블러 배경 인용06 testimonial-aurora 전면 오로라 밴드07 cta-band-aurora 그레인 다크 푸터08 footer-aurora 그라디언트 버튼·글로우 포커스09 buttons-inputs-aurora

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

01히어로

색 덩어리 세 개가 떠돈다

블러 처리한 색 덩어리 세 개가 헤드라인 뒤에서 서로 다른 박자로 떠돌며 겹칩니다.

움직이는 오브 배경 히어로
새 창에서 열기

01 · 움직이는 오브 배경 히어로 — 측정 누적면적 38.218% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

blur(60px)translate+rotate그레인 오버레이

카드는 고정, 빛만 지나간다

카드 자체는 짙은 잉크색 고정, 오로라는 그 위를 지나가는 빛으로만 씁니다.

.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내비게이션

투명에 가까운 메뉴 배경

메뉴 배경이 완전히 투명에 가깝고, 안쪽에 반투명 잉크 유리 하나만 깔려 있습니다.

투명 내비
새 창에서 열기

02 · 투명 내비 — 측정 누적면적 3.459% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

backdrop-filter: blurtranslateXborder 반투명

필을 3등분으로 옮긴다

활성 항목을 가리키는 필은 항목 세 개를 퍼센트로 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색 줄무늬가 보이도록 잘라내고, 그 줄무늬를 계속 흘려보냅니다.

그라디언트 보더 카드
새 창에서 열기

03 · 그라디언트 보더 카드 — 측정 누적면적 2.081% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

repeating-linear-gradient@keyframes sweepmask 이중 레이어

시선이 테두리에 머무는 이유

안쪽 카드는 짙은 잉크색으로 고정해 시선이 테두리에 머무릅니다.

.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기능 목록

원형 배지 하나만 흐른다

기능마다 원형 배지 하나씩을 두고, 배지 안 그라디언트만 좌우로 흐르게 합니다.

그라디언트 아이콘 리스트
새 창에서 열기

04 · 그라디언트 아이콘 리스트 — 측정 누적면적 1.75% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

background-size 200%background-positionradius pill

목록 전체를 움직이지 않는 이유

목록 전체가 움직이면 산만하지만 작은 점 하나만 흐르면 시선을 자연스럽게 붙잡습니다.

.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가격

추천 플랜만 숨 쉰다

추천 플랜 카드에만 오로라 그라디언트가 숨 쉬듯 밝아졌다 옅어지고, 위치도 살짝 오갑니다.

강조 플랜 그라디언트
새 창에서 열기

05 · 강조 플랜 그라디언트 — 측정 누적면적 15.09% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

radial-gradient 위치 이동opacity 호흡badge 고정

옅은 유리 카드로 대비

일반 플랜은 옅은 유리 카드로 남겨 대비를 만듭니다.

.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후기

유리 카드 뒤의 오로라

반투명 유리 인용 카드 뒤에서 블러 처리한 오로라 덩어리 두 개가 천천히 떠돕니다.

블러 배경 인용
새 창에서 열기

06 · 블러 배경 인용 — 측정 누적면적 45.86% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

backdrop-filter: blurtranslate 루프border 반투명

글자는 또렷하게

카드 앞면은 흐림 처리를 살짝만 줘서 글자는 또렷하게, 배경만 은은하게 비칩니다.

.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색이 천천히 흘러가고, 그 위에 정지된 그레인이 얹혀 화면이 인쇄물처럼 보입니다.

전면 오로라 밴드
새 창에서 열기

07 · 전면 오로라 밴드 — 측정 누적면적 36.246% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

background-position 애니메이션mix-blend-mode: overlayradius card

누적면적 9개 중 3위

밴드 전체가 피사체라 누적면적(변한 픽셀의 면적)이 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푸터

css 그레인 효과는 어떻게 지지직거리나

필름 그레인을 프레임마다 다른 자리로 점프시켜 지지직거리는 질감을 만듭니다.

그레인 다크 푸터
새 창에서 열기

08 · 그레인 다크 푸터 — 측정 누적면적 0.78% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

steps() 그레인background-position 랜덤칸 배경 5%

steps() 가 핵심

부드러운 곡선 대신 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 글로우로 늘 은은하게 빛납니다.

그라디언트 버튼·글로우 포커스
새 창에서 열기

09 · 그라디언트 버튼·글로우 포커스 — 측정 누적면적 2.579% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

background-position 호버box-shadow 이중 글로우radius control

캡처할 때만 강제 재생

아홉 개 중 유일하게 호버로 발동하는 항목이라 캡처할 땐 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로 바꿔야 같은 정도의 질감이 유지됩니다. 같은 빛을 금속 질감으로 밀고 가면 Y2K 크롬 홀로그램 랜딩의 번쩍이는 면 처리가 됩니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.