🎨 디자인 도구

디자인 도구란?

CSS의 그라디언트나 그림자는 숫자를 눈으로 보면서 맞춰야 하는데, 코드를 고치고 새로고침하길 반복하면 시간이 훅 갑니다. 슬라이더를 움직이면 결과가 바로 보이고 완성된 CSS를 복사해 가면 되도록 만들었습니다. 이미지 작업도 업로드 없이 브라우저 안에서 처리합니다.

이럴 때 씁니다

• 배경 그라디언트나 버튼 그림자를 눈으로 보며 조절할 때
• 애니메이션 이징(cubic-bezier)을 실제 움직임으로 확인할 때
• 이미지 용량을 줄이거나 WebP로 바꿔야 할 때
• 카드 모서리나 유기적인 blob 모양을 만들 때

디자인 도구 전체 목록

• CSS 그라디언트 생성기 — 선형·원형·원뿔 그라디언트를 눈으로 보며 만들고 CSS 코드를 복사합니다. 프리셋 15종·랜덤 생성 지원.
• CSS 그림자(box-shadow) 생성기 — box-shadow·text-shadow를 슬라이더로 조절하고 여러 겹을 쌓아 CSS를 만듭니다. 머티리얼 elevation·네온 프리셋 포함.
• cubic-bezier 이징 편집기 — 애니메이션 이징 곡선을 드래그로 편집하고 공이 실제로 움직이는 미리보기로 확인합니다. 이징 프리셋 15종.
• 이미지 리사이즈·용량 압축 — 사진 크기를 줄이고 JPEG·PNG·WebP로 변환해 용량을 압축합니다. 여러 장 동시 처리, 절감률 표시, 업로드 없이 브라우저에서만 처리.
• border-radius 생성기 — 모서리를 하나씩 조절해 border-radius CSS를 만듭니다. 8방향 타원 고급 모드와 유기적 blob 모양 랜덤 생성 지원.

공통 안내

디자인 도구를 포함한 툴즈의 모든 도구는 회원가입이나 설치 없이 무료로 쓸 수 있습니다. 입력한 내용은 브라우저 안에서만 처리되어 서버로 전송되거나 저장되지 않으므로, 업무 데이터를 다뤄도 안전합니다. 찾는 도구가 목록에 없다면 🔍 전체 검색 으로 다른 카테고리까지 찾아볼 수 있습니다.