Skip to main content
🎨

디자인 도구 도구

CSS 생성기, 색상 도구 및 SVG 제작

26 개 도구
🎨

색상 코드 변환기

HEX, RGB, HSL 색상 코드 간 변환을 합니다. 색상 선택기와 실시간 미리보기로 직관적인 색상 선택이 가능합니다.

🎨

색상 선택기

색상 휠과 슬라이더로 직관적으로 색상을 선택하세요. HEX, RGB, HSL 형식의 색상 코드를 확인하고 복사할 수 있습니다.

🎨

이미지 색상 추출기

이미지에서 대표 색상을 자동으로 감지하고 색상 팔레트를 생성합니다. 이미지의 아무 곳이나 클릭하여 개별 색상을 추출할 수도 있습니다.

🎯

이미지 평균 색상 추출기

이미지 전체 또는 선택 영역의 평균 색상을 계산합니다. 색상 배합이나 썸네일 배경색 선택에 유용합니다.

🌈

CSS 그라데이션 생성기

드래그 조작으로 CSS 그라데이션을 시각적으로 만듭니다. 선형, 원형, 원추형 그라데이션 유형과 프리셋을 지원합니다.

🔲

CSS 박스 그림자 생성기

슬라이더로 CSS box-shadow를 시각적으로 만듭니다. 다중 그림자와 내부 그림자를 지원합니다.

CSS 테두리 둥글기 생성기

각 모서리를 개별 조절하여 CSS border-radius를 생성합니다. 타원형 반경 옵션과 인기 도형 프리셋을 포함합니다.

CSS 텍스트 그림자 생성기

실시간 미리보기로 CSS text-shadow를 생성합니다. 네온, 엠보스 등의 프리셋과 함께 여러 그림자를 겹칠 수 있습니다.

🔺

CSS 삼각형 생성기

border 속성을 사용하여 CSS 삼각형을 생성합니다. 8방향을 모두 지원하며 크기와 색상을 자유롭게 설정할 수 있습니다.

✂️

CSS 클리핑 경로 생성기

드래그 앤 드롭으로 CSS clip-path 도형을 시각적으로 만듭니다. 다각형, 원, 타원 및 별, 하트 등의 프리셋을 포함합니다.

🪟

CSS 글래스모피즘 생성기

실시간 미리보기와 CSS 출력으로 젖빛 유리 UI 효과를 만듭니다. 투명도, 블러, 테두리, 그림자 설정을 세밀하게 조정합니다.

CSS 로더 생성기

다양한 CSS 로딩 애니메이션 중에서 선택하고 코드를 얻으세요. 스피너, 도트, 바 등의 색상, 크기, 속도를 커스터마이징합니다.

📐

CSS Flexbox 생성기

Flexbox 레이아웃을 시각적으로 만들고 CSS 코드를 생성합니다. 모든 속성을 조정하고 치트 시트를 내장하고 있습니다.

📈

CSS 큐빅 베지어 생성기

CSS 애니메이션 이징 곡선을 시각적으로 만듭니다. 핸들을 드래그하고 애니메이션을 실시간으로 미리봅니다.

🎨

색상 음영 생성기

모든 색상의 밝은 음영부터 어두운 음영까지 변형을 생성합니다. 단계 수를 조정하고 Tailwind CSS 팔레트로 내보낼 수 있습니다.

🎨

색상 혼합기

두 가지 이상의 색상을 지정한 비율로 혼합하여 새로운 색상을 만듭니다. RGB, HSL, LAB 등 다양한 색공간에서 결과를 비교할 수 있습니다.

🎨

색상 팔레트 생성기

기본 색상에서 색채 이론을 활용하여 색상 팔레트를 생성합니다. 보색, 유사색, 삼원색 등 다양한 색상 배합을 포함합니다.

🔤

웹 폰트 미리보기

Google Fonts의 웹 폰트를 실시간으로 미리 볼 수 있습니다. 크기와 색상을 조절하면서 여러 폰트를 비교해 보세요.

🎨

HTML 색상 이름 참조

148개의 HTML/CSS 명명 색상을 한곳에서 확인하세요. 검색, 미리보기, HEX 코드 복사가 간편합니다.

🔲

CSS 배경 패턴 생성기

순수 CSS로 배경 패턴을 생성합니다. 스트라이프, 점, 체크 등을 비주얼 에디터로 커스터마이즈합니다.

📜

CSS 스크롤바 생성기

비주얼 에디터로 CSS 스크롤바 디자인을 커스터마이즈합니다. 색상, 너비, 테두리 반경을 조정하고 코드를 바로 복사합니다.

🌈

CSS 그라디언트 텍스트 생성기

텍스트에 그라디언트를 적용하는 CSS 코드를 생성합니다. 색상, 방향, 범위 조정을 실시간으로 미리봅니다.

☑️

CSS 체크박스 생성기

비주얼 에디터로 커스텀 CSS 체크박스를 만듭니다. 애니메이션, 색상, 모양을 자유롭게 커스터마이즈합니다.

🔘

CSS 토글 스위치 생성기

비주얼 에디터로 커스텀 CSS 토글 스위치를 만듭니다. 크기, 색상, 애니메이션을 조정하고 코드를 내보냅니다.

🫧

SVG 블롭 생성기

유기적인 블롭 형태의 SVG를 자동 생성합니다. 무작위성과 복잡도를 조정하여 웹 디자인 장식에 활용하세요.

🔷

SVG 패턴 생성기

반복 가능한 SVG 타일 패턴을 생성합니다. 패턴 유형, 색상, 크기를 커스터마이즈하고 코드를 내보냅니다.