CSS 그라디언트/패턴 생성기,
미리 보고 바로 복붙.

linear, radial, conic 그라디언트부터 repeating-gradient 줄무늬와 체커보드까지 실무 배경 패턴을 빠르게 만들고 CSS 코드로 복사하세요.

CSS

CSS 그라디언트/패턴 생성기

그라디언트, 반복 줄무늬, 도트, 체커보드 배경을 미리 보고 바로 복사하세요.

사선 줄무늬 CSS
.preview_box {
  background: repeating-linear-gradient(
    135deg,
    #f28c28 0 18px,
    #f6c84f 18px 36px
  );
}

줄무늬 배경은 왜 repeating-gradient가 좋나요?

반복 이미지를 따로 만들지 않아도 CSS 한 줄로 선명한 줄무늬를 만들 수 있습니다. 색상, 각도, 간격만 바꾸면 안내 배너, skeleton 배경, 표면 장식에 바로 적용할 수 있습니다.

OKLCH와 color-mix는 어디에 쓰나요?

같은 두 색이라도 섞는 방식에 따라 중간색이 탁해질 수 있습니다. OKLCH 기반 color-mix는 밝기와 채도를 더 자연스럽게 유지해 hover 배경이나 소프트 그라디언트를 만들 때 유용합니다.