CSS 변수 생성기 🔒 브라우저에서 로컬로 실행 — 아무것도 업로드되지 않습니다.

이 도구에 대해

CSS 커스텀 프로퍼티(흔히 CSS 변수라고 부릅니다)를 사용하면 브랜드 색상, 간격 단위, 폰트 스택 같은 값을 한 번만 정의하고 var(--name)으로 어디서든 재사용할 수 있습니다. 반복되는 값을 한 곳에 모아두면 수십 개 파일을 찾아 바꾸는 대신 :root 레벨에서 한 번만 수정하면 스타일시트 전체에 반영됩니다. 또한 커스텀 프로퍼티는 살아있는 DOM 값이므로 JavaScript나 미디어 쿼리가 실행 중에 값을 읽고 다시 쓸 수 있어, CSS를 건드리지 않고도 즉각적인 테마 전환, 다크 모드 토글, 사용자 조정 가능한 간격을 구현할 수 있습니다.

아래 각 행에 이름과 값을 입력하세요. 이 도구는 모든 이름을 자동으로 정리해 불필요한 앞쪽 "--"를 제거하고 잘못된 문자를 하이픈으로 바꾸므로, 접두사를 빠뜨리거나 공백이 섞여 들어가는 실수가 생성된 결과를 절대 망가뜨리지 않습니다. 생성된 :root { ... } 출력을 스타일시트에 그대로 복사하거나, 필요한 곳 어디서든 @import할 수 있도록 별도의 .css 파일로 다운로드하세요. 입력하는 동안 모든 처리가 브라우저에서 로컬로 이루어지며, 어디에도 업로드되지 않습니다.

자주 묻는 질문