CSS 도구

이 무료 도구로 깔끔하고 복사해 붙여넣을 수 있는 CSS를 시각적으로 생성하세요 — box shadow, 그라데이션, border-radius, flexbox, grid, 애니메이션, clip-path, 필터까지 — 각 값을 조정할 때마다 실시간 미리보기로 확인할 수 있습니다.

그림자, 필터, 마무리

CSS Box Shadow 생성기

실시간 미리보기로 box-shadow를 시각적으로 디자인하고 CSS를 복사하세요.

CSS Text Shadow 생성기

text-shadow를 실시간 미리보기로 디자인하고 CSS를 복사하세요.

뉴모피즘 생성기

실시간 미리보기로 소프트 UI 뉴모픽 그림자를 만들고 복사하세요.

글래스모피즘 생성기

블러, 투명도, 채도, 틴트 색상으로 프로스트 글래스 카드 CSS를 만드세요.

CSS 필터 생성기

슬라이더와 실시간 미리보기로 CSS 필터를 구성하고 복사하세요.

CSS 텍스트 스트로크

텍스트에 외곽선이나 스트로크를 추가하고 CSS를 복사합니다.

CSS 스크롤바 스타일러

맞춤 스크롤바를 디자인하고 ::-webkit-scrollbar CSS를 복사합니다.

도형, 그라데이션, 배경

CSS Border Radius 생성기

각 모서리의 반경을 실시간 미리보기로 조정하고 CSS를 복사하세요.

CSS clip-path 생성기

요소를 다양한 도형으로 잘라내고 clip-path CSS를 복사하세요.

CSS 삼각형 생성기

원하는 방향으로 순수 CSS 삼각형을 생성하고 CSS를 복사하세요.

CSS 그라데이션 생성기

선형 또는 방사형 그라데이션을 실시간 미리보기로 만들고 CSS를 복사하세요.

CSS 배경 패턴

두 가지 색상으로 CSS 배경 패턴을 생성하고 복사하세요.

레이아웃과 반응형 디자인

CSS Flexbox 플레이그라운드

실시간 미리보기로 flexbox 속성을 실험하고 생성된 CSS를 복사하세요.

CSS Grid 생성기

열, 행, 간격을 조절해 CSS 그리드 레이아웃을 생성하고 실시간으로 미리보세요.

CSS 미디어 쿼리 빌더

프리셋으로 반응형 @media 쿼리를 만들고 복사하세요.

CSS 종횡비 박스

패딩 대체 코드가 포함된 반응형 종횡비 박스를 생성합니다.

CSS 다단 레이아웃

구분선이 있는 CSS 다단 텍스트 레이아웃을 생성합니다.

모션, 변형, 애니메이션

CSS Transform 생성기

translate, rotate, scale, skew를 하나의 CSS transform으로 조합하고 실시간으로 미리보세요.

CSS 애니메이션 생성기

키프레임 애니메이션을 만들고 실시간으로 미리 본 뒤 CSS를 복사하세요.

CSS Easing 생성기

cubic-bezier 이징을 선택하거나 직접 만들고 애니메이션 점으로 다시 재생해 보세요.

CSS 스피너 생성기

순수 CSS 로딩 스피너를 생성하고 CSS를 복사하세요.

일치하는 도구가 없습니다.

다른 카테고리 둘러보기