CSS 그라디언트/패턴 생성기,
미리 보고 바로 복붙.
linear, radial, conic, mesh, shader, liquid, holographic, noise 그라디언트부터 repeating-gradient/no-jank 줄무늬, 그리드, 질감, 글래스 배경 패턴까지 색상과 각도, 간격을 보면서 조정하고 CSS 코드로 바로 복사하세요.
CSS output
프리셋을 고르고, 색상과 간격을 보면서 바꿉니다
프리셋을 고른 뒤 같은 결과 패널에서 색상, 각도, 간격을 조정하고 라이트/다크 컬러 변수까지 필요한 코드만 복사하세요.
CSS quick start
처음이면 이렇게 시작하세요
- 프리셋 선택카드, 버튼, 히어로 배경처럼 작업 상황에 맞는 패턴을 고릅니다.
- 색상과 간격 조정오른쪽 결과 패널에서 미리보기와 코드를 보며 필요한 값만 바꿉니다.
- CSS 복사배경 CSS, 컬러 세트, clip-path, clamp, IR 코드를 필요한 단위로 가져갑니다.
CSS
CSS 그라디언트/패턴 생성기
메시·셰이더·노이즈 그라디언트, 선명한 줄무늬, 그리드, 질감, clip-path와 IR까지 바로 복사하세요.
.preview_box {
background-color: #ffe2a6;
background-image:
radial-gradient(circle at 50% 50%, #ff8a1e 0% 18%, transparent 34%),
radial-gradient(circle at 82% 18%, color-mix(in oklch, #ff8a1e 48%, white) 0 16%, transparent 32%),
radial-gradient(circle at 72% 76%, #ffe2a6 0 18%, transparent 36%),
radial-gradient(circle at 24% 82%, color-mix(in oklch, #ffe2a6 55%, black) 0 16%, transparent 34%);
background-blend-mode: screen, normal, multiply, normal;
}기본값 135deg · 20px · 0-100% · 100%
CSS 패턴 작업 기준 더 보기
줄무늬 배경은 repeating-gradient만 쓰면 되나요?
반복 이미지를 따로 만들지 않아도 CSS 한 줄로 줄무늬를 만들 수 있습니다. 아주 얇은 선이 흔들릴 때는 linear-gradient와 background-size로 반복하는 no-jank 방식도 같이 비교하세요. 색상, 각도, 간격만 바꾸면 안내 배너, skeleton 배경, 표면 장식에 바로 적용할 수 있습니다.
메시·셰이더·노이즈 배경은 언제 쓰면 좋나요?
메시와 셰이더 그라디언트는 히어로, 카드, 버튼 배경에 부드러운 색 전환을 줄 때 좋고, 노이즈·그레인·질감 프리셋은 밋밋한 단색 배경에 깊이를 더하고 색 밴딩을 줄이는 데 유용합니다. 색상과 각도, 간격을 조정하면서 미리보기로 확인한 뒤 필요한 배경 CSS만 복사하세요.