CSS 생성기
그라디언트·그림자(box/text-shadow)·둥근 모서리(border-radius)·flex/grid 레이아웃을 눈으로 보며 만들고 CSS 를 복사합니다. 입력은 서버로 가지 않습니다.
색 정지점 (2~8개)
그림자 겹 (최대 6겹)
입력은 이 브라우저 안에서만 쓰이며 서버로 보내지 않습니다. 만들어진 CSS 는 허용된 값(색·정수·정해진 낱말)으로만 조립해 `;` 나 `}` 가 끼어들 수 없습니다. 오래된 브라우저는 conic-gradient·gap 일부를 지원하지 않을 수 있습니다.
자주 묻는 질문
만든 CSS 는 어떻게 쓰나요?
복사한 줄을 스타일시트의 규칙 안에 붙이면 됩니다. 예: .card { 복사한 내용 }. 그라디언트는 오래된 브라우저를 위해 대체 색 줄이 먼저 나옵니다.
flex 와 grid 중 무엇을 쓰나요?
한 방향(가로 또는 세로)으로 늘어놓고 정렬할 때는 flex, 행과 열이 있는 격자에는 grid 가 어울립니다. 미리보기에서 값을 바꿔 보며 차이를 확인하세요.
입력한 값이 저장되나요?
아니요. 모든 처리는 브라우저에서 이뤄지고 서버로 전송되지 않습니다.
이 도구 사용 안내
CSS를 직접 쓰기 번거로운 효과를 눈으로 보며 만들 때 쓰세요. 그라디언트, 그림자(box·text-shadow), 둥근 모서리, flex·grid 레이아웃을 조절하면 CSS가 만들어지고 복사할 수 있습니다.
자주 묻는 질문
무엇을 만들 수 있나요?
그라디언트, 그림자(box-shadow·text-shadow), 둥근 모서리(border-radius), flex·grid 레이아웃의 CSS를 눈으로 보며 만들 수 있습니다.
만든 CSS는 어떻게 쓰나요?
복사 버튼으로 CSS를 복사해 스타일시트에 붙여 넣으면 됩니다.
입력이 서버로 가나요?
아닙니다. 입력은 서버로 가지 않습니다.
함께 쓰는 도구
모든 도구 보기개발자 도구 모음
URL·Base64·HTML·유니코드 인코딩, JSON 정리·CSV 변환, 유닉스 시간, JWT 디코더, 해시, UUID, 정규식, 텍스트 비교, 진법·cron 해석, 표 변환, 서브넷(CIDR)·chmod 계산, HTTP·MIME·포트 사전, robots·sitemap, 더미 데이터, TOTP·semver·비트 연산·설정 파일(.env·INI·TOML) 변환·JSON 스키마 검증·docker run→compose·.gitignore·OG 태그 생성·ASCII/ANSI 코드표까지 40가지 개발 보조 도구를 한 곳에서.
코드 정리(Beautifier)
HTML·CSS·JS·JSON·PHP·Java·Kotlin·Shell·Python·SQL·XML·YAML 코드를 탭이나 공백(2·4·8칸)으로 보기 좋게 정리하고, 복사하거나 색이 입혀진 HTML 로 내보냅니다. 코드는 서버로 보내지 않습니다.
코드 압축(Minify)
HTML·CSS·JS·JSON 의 주석과 불필요한 공백을 없애 용량을 줄입니다. 붙여넣거나 파일을 열고(끌어다 놓기 가능), 결과를 복사하거나 .min 파일로 내려받습니다. 코드는 서버로 보내지 않습니다.
JSON·XML·YAML 파서
JSON·XML·YAML 을 붙여넣거나 파일로 열면 문법을 검사하고(틀리면 몇 줄 몇 칸인지), 접고 펼치는 트리로 보여 주고, 값·키를 검색하고, 경로로 값을 찾고, 정리·압축하고, 서로 변환합니다. 모든 처리는 이 브라우저 안에서만 이뤄지며 입력과 파일은 서버로 보내지 않습니다.
비밀번호 생성기
길이와 문자 종류를 골라, 또는 외우기 쉬운 단어 조합(패스프레이즈)으로 추측하기 어려운 비밀번호를 만듭니다. 만든 값은 이 화면 밖으로 나가지 않습니다.
내 IP 확인
지금 접속한 공인 IP 주소와 대략적인 위치를 확인합니다.