디자인 도구
디자이너를 위한 색상, 타이포그래피, 레이아웃, 비주얼 도구.
더 이상 CSS를 감으로 작성하지 마십시오. 각 생성기는 실시간 미리보기가 포함된 비주얼 컨트롤과 한 번의 클릭으로 복사할 수 있는 프로덕션용 CSS를 제공합니다. 드래그 앤 드롭으로 Flexbox 및 Grid 레이아웃을 구축하고, 슬라이더로 그라디언트와 그림자를 만들고, @keyframes 문법을 외우지 않아도 로더와 애니메이션을 생성할 수 있습니다. 모든 도구는 모든 최신 브라우저와 호환되는 깔끔한 표준 CSS를 생성합니다.
Layout Generators
Color Tools
색상 팔레트 생성기
조화로운 색상 팔레트 생성
그라디언트 생성기
실시간 미리보기로 CSS 그라디언트 구성
대비 검사기
WCAG AA/AAA 접근성 대비 검사
색각 이상 시뮬레이터
색각 결함 시뮬레이션
틴트 & 셰이드
색상의 밝은/어두운 변형 생성
이미지 색상 추출기
모든 이미지에서 색상 팔레트 추출
Typography
타입 스케일 생성기
CSS 출력 포함 모듈러 타입 스케일
줄 높이 계산기
최적의 줄 높이 및 자간 계산
폰트 페어링
Google Fonts 조합 제안
Text Shadow 생성기
CSS text-shadow 비주얼 빌더
Visual Effects & CSS
Box Shadow 생성기
CSS box-shadow 비주얼 빌더
CSS Clip-path 생성기
clip-path 폴리곤 비주얼 빌더
CSS 애니메이션 생성기
키프레임 애니메이션 빌더
Border Radius 생성기
CSS border-radius 비주얼 생성기
글라스모피즘 생성기
backdrop-filter로 유리 효과 생성
CSS 로더 생성기
순수 CSS 스피너 및 로딩 애니메이션 생성
SVG 블롭 생성기
랜덤 유기적 형태를 SVG로 생성
Image & Asset Tools
화면 비율 계산기
모든 화면 비율에 대한 치수 계산
SVG 뷰어 & 최적화
SVG 코드 미리보기 및 압축
파비콘 생성기
텍스트 또는 이모지로 파비콘 생성
플레이스홀더 이미지
모든 크기의 플레이스홀더 이미지 생성
자주 묻는 질문
생성된 CSS를 상업 프로젝트에 사용할 수 있습니까?
물론입니다. 도구로 생성된 모든 CSS는 표준 코드이며 독점 코드가 아닙니다. 개인, 상업, 오픈소스 등 모든 프로젝트에 출처 표기 없이 사용하실 수 있습니다.
Figma나 Photoshop이 필요합니까?
아닙니다. 각 도구는 브라우저에서 자체적으로 작동하는 비주얼 에디터입니다. 디자인 소프트웨어가 필요하지 않습니다 — 색상을 선택하고, 슬라이더를 조정하고, 실시간으로 미리보고, CSS를 복사하면 됩니다.
생성된 스타일은 모든 브라우저에서 호환됩니까?
네. 모든 도구는 Chrome, Firefox, Safari, Edge와 호환되는 표준 CSS를 생성합니다.