디자인 및 CSS

CSS 그라디언트, 그림자, 색상 스케일을 생성하고 명도 대비를 확인하세요 — 바로 복사 가능한 코드.

5개 도구

코드 스니펫을 브라우저 안에서 구문 강조가 입혀진 깔끔한 PNG 이미지로 바꿔 줍니다. 업로드는 필요 없습니다.

전경색과 배경색의 WCAG 대비비를 확인하고 일반 텍스트와 큰 텍스트에서 AA와 AAA를 통과하는지 보여 줍니다.

기준 HEX 색 하나를 Tailwind 방식의 50~950 셰이드 스케일로 만들고 각 단계를 색 견본과 복사 가능한 HEX 값으로 보여줍니다.

오프셋·블러·스프레드·색상·inset 컨트롤로 다중 레이어 CSS box-shadow를 만들고 바로 쓸 수 있는 box-shadow 속성을 복사하세요.

색 정지점과 각도를 지정해 선형·방사형·원뿔형 CSS 그라데이션을 만들고 실시간으로 확인하며 background 규칙을 복사할 수 있습니다.