메시 그라디언트

개요 메시 그라디언트

레이어형 방사형 그라디언트와 CSS/SVG 내보내기

부드러운 다점 메시 그라데이션을 디자인하고 CSS나 SVG로 내보내 인터페이스에 쓰세요.

기준 색 위에 네 겹의 방사형 그라디언트를 쌓습니다. 미리보기와 CSS가 함께 갱신됩니다.

여러 방사형 그라디언트를 기준 색 위에 쌓고 각 색이 제 위치에서 투명으로 사라집니다. 단일 방향 없이 부드럽고 유기적인 혼합이 만들어집니다.

각 층이 독립적이어서 한 중심을 움직여도 전체 구성은 유지됩니다.

CSS 버전은 background-image에 네 겹의 radial-gradient를 사용하며 최신 브라우저에서 동작합니다. SVG 버전은 디자인 도구와 인쇄에 적합한 단일 파일입니다.

왜 네 색인가요?

네 중심이면 히어로와 카드에 충분한 깊이를 주면서 탁해지지 않습니다. 더 필요하면 내보낸 코드를 편집하세요.

텍스트 가독성은 어떻게 지키나요?

차분한 영역에 텍스트를 두고 반투명 패널을 더한 뒤 WCAG 도구로 대비를 확인하세요.

지원 환경은?

CSS의 층형 방사형 그라디언트는 널리 지원됩니다. 아주 오래된 브라우저는 기준 색만 보일 수 있습니다.