CSS 로더 생성기
CSS Loader Generator
궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.
디자인 / 비주얼 시스템 랩
디자인
실시간 미리보기로 CSS와 색상 시스템을 프로토타이핑하고 코드를 바로 복사합니다.
디자인
핵심 도구 17개. 실시간 시각 피드백과 바로 복사할 수 있는 결과로 CSS와 색상 시스템을 만들어요.
전체 17개 중 17개 표시
CSS 체크박스 생성기
CSS Checkbox Generator
크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.
CSS 스위치 생성기
CSS Switch Generator
트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.
CSS clip-path 생성기
CSS Clip Path Generator
드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.
CSS 배경 패턴 생성기
CSS Background Pattern Generator
순수 CSS 그라데이션만으로 점, 격자, 사선 배경 패턴을 조합합니다. 이미지 파일 없이 타일과 표시 크기, 색을 조절합니다.
CSS cubic-bezier 생성기
CSS Cubic Bezier Generator
드래그 가능한 제어점으로 이징 커브를 빚고 선택한 지속 시간의 실시간 모션 미리보기로 cubic-bezier() 값을 복사합니다.
CSS 글래스모피즘 생성기
CSS Glassmorphism Generator
색조, 불투명도, 배경 흐림, 채도, 테두리 제어로 유리 질감 패널을 만들고 복잡한 배경 위에서 실제 모습을 미리 봅니다.
CSS 글리치 텍스트 생성기
CSS Text Glitch Effect Generator
짧은 텍스트에 세 겹 색수차 글리치를 오프셋과 속도 제어로 입히고 reduced-motion 대체 동작이 든 CSS를 복사합니다.
CSS 삼각형 생성기
CSS Triangle Generator
방향, 밑변, 높이, 채움색으로 테두리 기반 순수 CSS 삼각형을 만듭니다. 이미지나 SVG 없이 바로 쓰는 코드입니다.
CSS 박스 그림자 생성기
CSS Box Shadow Generator
실시간 카드에서 오프셋, 흐림, 확산, 색상, 불투명도, 인셋을 조절하고 정확한 box-shadow 선언을 복사합니다.
CSS border-radius 생성기
CSS Border Radius Generator
네 모서리를 픽셀·백분율로 연동하거나 따로 다듬고, 네 값을 모두 명시한 border-radius 선언을 복사합니다.
HEX → RGBA 변환
HEX to RGBA Converter
#RGB, #RGBA, #RRGGBB, #RRGGBBAA 네 가지 표기를 알파까지 정확히 풀어 rgba()로 바꾸고 실시간 스와치에서 복사합니다.
RGBA → HEX 변환
RGBA to HEX Converter
rgb(), rgba() 색상을 채널별 확인과 정확한 알파 반올림으로 #RRGGBB 또는 #RRGGBBAA로 로컬에서 변환합니다.
집중 작업을 위해 설계 / 설정 없이도 쓸 수 있는 결과.
설계부터 브라우저 우선.
브라우저 우선
작업을 바로 열어요. 패키지 설치도 계정도 필요 없습니다.
보이는 처리
모든 단계에서 입력, 결과, 상태, 실행 방식을 확인합니다.
바로 내보내기
다듬을 필요 없이 유용한 결과를 복사하거나 저장합니다.
관련 카테고리
다른 집중 컬렉션으로 작업을 이어 가요.
시스템 디자인 노트
모든 시각적 선택을 재현 가능하게 만들어요.
의도적 제약 사용
무작위 값 대신 간격, 스케일, 기하 규칙에서 시작합니다.
맥락 속에서 대비 확인
색이 쓰일 배경과 글자 크기 기준으로 판단합니다.
생성된 CSS 읽기
프로덕션에 넣기 전에 값과 브라우저 지원을 확인합니다.
시작하기 전에 궁금한 점?
이 페이지의 어떤 도구가 로컬에서 실행되나요?
현재 제공되는 모든 도구는 입력을 업로드하지 않고 브라우저 안에서 처리합니다. 향후 클라우드나 하이브리드 처리가 추가되면 사용 전에 명확히 안내합니다.
변환하면 원본 파일이 바뀌나요?
Toolars는 브라우저의 별도 사본을 다뤄요. 직접 내려받아 덮어쓰지 않는 한 원본 파일이나 텍스트는 그대로입니다.
도구를 저장할 수 있나요?
네. 먼저 로그인하면 즐겨찾기가 계정에 저장되고, 로그인 후 해당 도구로 돌아와요.
잘못된 결과는 어떻게 신고하나요?
각 도구 페이지에 신고 창이 있습니다. 전송되는 피드백은 직접 입력한 메시지와 선택한 페이지 정보뿐입니다.
이 컬렉션에 필요한 도구가 없나요?
입력값, 변환 내용, 기대하는 결과를 알려 주세요.