박스 그림자, flexbox 레이아웃, 그리드 레이아웃, 단위 변환을 위한 강력한 CSS 생성기입니다. CSS 및 Tailwind 코드를 즉시 얻을 수 있습니다. 모든 처리는 브라우저에서 로컬로 이루어집니다.
box-shadow: 4px 4px 8px 0px #00000040;도구 메모은(는) 서포터 전용 기능입니다.
Box Shadow, Flexbox, 또는 Unit Converter 탭 중에서 선택하세요.
슬라이더와 입력 필드를 사용하여 CSS 속성을 설정합니다. 결과의 실시간 미리보기를 확인하세요.
생성된 CSS 또는 Tailwind 코드를 클립보드에 복사합니다.
일반적인 패턴의 프리셋 설정을 시도해보고, 거기서부터 커스터마이징하세요.
Box shadow 생성기는 수평/수직 오프셋, blur radius, spread, 색상을 커스터마이징할 수 있는 CSS box-shadow 속성을 생성합니다. 여러 레이어를 쌓아 elevated cards나 neumorphic 디자인 같은 복잡한 효과를 만들 수 있습니다. 각 레이어는 알파 투명도가 있는 RGBA 색상과 내부 효과를 위한 inset shadows를 지원합니다. 이 도구는 표준 CSS와 Tailwind arbitrary values 모두를 생성합니다.
Flex 컨테이너 속성(flex-direction, justify-content, align-items, flex-wrap, gap)을 설정하고 실시간으로 동등한 CSS와 Tailwind 클래스를 확인합니다. 비주얼 빌더는 설정에 따라 아이템이 어떻게 배치될지 보여줍니다. row/column 방향, center/space-between 정렬, CSS Grid에서 도입된 gap 간격 등 모든 현대적인 flexbox 속성을 지원합니다.
절대 단위(px, pt)와 상대 단위(rem, em, vw, vh) 사이를 변환합니다. 정확한 rem/em 계산을 위해 지정된 base font size(기본값 16px)를 사용합니다. 변환은 W3C 표준을 따릅니다: 1rem = base font size, 1em = 부모 font size, 1vw = viewport 너비의 1%. 반응형 디자인과 접근성 친화적인 사이징에 유용합니다.
모든 CSS 생성은 JavaScript를 사용하여 브라우저 내에서 완전히 이루어집니다. 해당하는 경우 바닐라 CSS와 Tailwind CSS 출력 모두를 받습니다. 생성된 코드는 프로덕션 준비가 되어 있으며 스타일시트에 직접 복사할 수 있습니다. 서버 통신이 없습니다 — 도구는 한 번 로드되면 완전히 오프라인으로 작동합니다.
이 도구는 box shadows(단일 또는 여러 레이어), flexbox 레이아웃(컨테이너 및 아이템 속성), CSS 단위(px, rem, em, %) 간 변환을 생성합니다.