IROUL
회원가입로그인
뒤로가기
배경·앰비언트

[Animated Gradient] 움직이는 그라데이션

CSS 애니메이션으로 부드럽게 움직이는 그라데이션 배경을 만듭니다. 모던하고 시각적으로 강렬한 UI 효과에 필수적입니다.

CSS Animationbackground-positionbackground-sizeCSS keyframes
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약

background-position을 애니메이션하면 배경이 끊임없이 흘러가는 그라데이션 효과를 만들 수 있습니다.

이럴 때 필요해요

랜딩 페이지, 히어로 섹션, 버튼, 카드 배경 등을 더 눈에 띄게 표현하고 싶을 때 사용합니다. 정적인 그라데이션보다 훨씬 모던해 보이고 사용자의 시선을 끕니다.

어떻게 동작하나

  1. 그라데이션 크기를 배경보다 크게 설정 (background-size: 400%)

  2. background-position을 0% 100% 0%로 무한 반복

  3. 각 방향(상하좌우)의 색상을 고르게 분산하면 부드러운 전환 효과

  4. 속도는 animation-duration으로 조절

놓치기 쉬운 것

  • background-size가 작으면 애니메이션이 끊겨 보입니다

  • 너무 빠른 애니메이션은 사용자를 피로하게 합니다 (8-10초 권장)

  • 큰 영역에 적용하면 성능에 영향을 줄 수 있으니 will-change 사용을 고려하세요

  • 어두운 배경에 밝은 텍스트를 올릴 때는 충분한 명도 대비를 유지하세요

이런 곳에 써요

  • 랜딩 페이지 히어로 섹션

  • Call-to-Action 버튼

  • 카드 호버 효과

  • 배경 또는 구분선

  • 프리미엄 기능 강조

소스 코드

· 데모 페이지에서 자동 추출
'use client';

import { AnimatedGradientDemo } from './-components/AnimatedGradientDemo';

export default function AnimatedGradientPage() {
  return (
    <div className="bg-black min-h-screen">
      <AnimatedGradientDemo />
    </div>
  );
}
60조회수

댓글