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

이미지 없는 메시 그라데이션 배경

blur 블롭을 겹쳐 흐르게 하는 부드러운 mesh를 CSS만으로

CSSradial-gradientmix-blend-mode@keyframesSVG noise
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약

blur 블롭 4개 + mix-blend(screen) + 드리프트 keyframes로 만드는 mesh 배경.

이럴 때 필요해요

히어로/랜딩 배경을 무거운 이미지 없이, 가볍고 부드럽게 채우고 싶을 때.

놓치기 쉬운 것

그라데이션 띠(banding)는 grain 오버레이로 완화 / prefers-reduced-motion 존중 / 블롭이 너무 선명하면 blur 키우기.

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { MeshGradientDemo } from "./-components/MeshGradientDemo";

export const metadata: Metadata = {
  title: "메시 그라데이션 (데모)",
  description:
    "blur 블롭을 겹쳐 드리프트시키는 부드러운 mesh 배경. 이미지 없이 순수 CSS(@keyframes + mix-blend + grain)로.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60">
      <MeshGradientDemo />
    </main>
  );
}
84조회수

댓글