CSS 생성기 모음｜그라디언트와 도형

CSS Generator Suite란?

CSS Generator Suite는 단일 탭 인터페이스에서 15가지 일반적인 스타일링 작업을 위한 바로 붙여넣을 수 있는 CSS 및 Tailwind 출력을 생성하는 브라우저 기반 툴박스입니다. box shadow, flexbox 선언, glassmorphism 규칙을 직접 작성하고 브라우저를 새로 고쳐 결과를 확인하는 대신, 슬라이더와 드롭다운을 조정하면 라이브 미리보기가 즉시 업데이트됩니다. 출력은 각 컨트롤 패널 바로 아래에 렌더링되며, 클릭 한 번으로 클립보드에 복사됩니다. 모든 계산은 브라우저 내에서 완전히 실행됩니다. 파일 업로드 없음, 계정 불필요, 페이지 로드 후 오프라인에서도 동작합니다.

전형적인 사용자로는 shadow 스택을 빠르게 프로토타입하려는 프론트엔드 개발자, 모션 사양을 위해 cubic-bezier 값을 내보내야 하는 디자이너, 미리보기가 실시간으로 변하는 것을 보면서 CSS 속성이 어떻게 구성되는지 이해하려는 학습자가 있습니다.

주요 기능

• 레이어가 있는 Box Shadow Generator — 독립적인 여러 shadow 레이어를 추가할 수 있으며, 각 레이어에는 자체 offset-X(−50~50 px), offset-Y(−50~50 px), blur(0~100 px), spread(−50~50 px), 색상 선택기, inset 토글이 있습니다. 생성된 box-shadow 선언은 모든 레이어를 하나의 쉼표로 구분된 값으로 결합합니다.
• Flexbox Layout Builder — flex-direction(row, row-reverse, column, column-reverse), justify-content(space-evenly 포함 6가지 값), align-items(5가지 값), flex-wrap, gap(0~48 px, 4 단위)을 선택할 수 있습니다. 번호가 매겨진 4개의 플레이스홀더 박스가 레이아웃을 라이브로 보여줍니다.
• CSS Grid Template Generator — grid-template-columns과 grid-template-rows를 원클릭 프리셋(repeat(4, 1fr), 200px 1fr 등)이 있는 자유 텍스트 문자열로 편집하고, gap, align-items, justify-items를 제어하며 최대 16개의 번호 매겨진 그리드 셀을 미리볼 수 있습니다.
• Unit Converter (px / rem / em / %) — 임의의 단위로 값을 입력하면 구성 가능한 기본 폰트 크기(기본값 16 px)에 대해 4가지 동등한 값이 즉시 재계산됩니다. 결과 카드를 클릭하면 단위가 붙은 해당 값이 복사됩니다.
• Cubic Bezier / Easing Generator — 4개의 슬라이더로 P1X, P1Y, P2X, P2Y를 제어합니다. canvas에는 컨트롤 포인트 핸들이 있는 bezier 곡선이 렌더링됩니다. 10개의 이름 있는 프리셋(ease, ease-in-back, ease-out-cubic 등)을 클릭 한 번으로 적용할 수 있습니다. 모션 미리보기는 현재 곡선을 사용해 트랙을 가로질러 블록을 애니메이션합니다.
• Clip Path Generator — circle, ellipse, inset, polygon 모양을 지원합니다. 폴리곤 편집기에는 6개의 프리셋(triangle, diamond, pentagon, hexagon, star, arrow)이 있습니다.
• Border Radius Generator — 연결 또는 모서리별 모드, 비대칭 반경을 위한 선택적 8값 구문, 6개의 모양 프리셋(Rounded, Pill, Leaf, Drop, Squircle, Message).
• Triangle Generator — 크기와 색상을 조정할 수 있는 4방향(up, down, left, right)의 고전적인 너비/높이가 0인 border-trick 삼각형을 생성합니다.
• Glassmorphism Generator — blur 양, 배경 불투명도, 배경색, 테두리 불투명도, 테두리 너비, shadow blur, shadow 불투명도를 제어합니다. 미리보기는 라이브 멀티서클 그라디언트 배경 위에 frosted 카드를 렌더링합니다.
• Fluid Typography / Clamp Generator — 최소 폰트 크기, 최대 폰트 크기, 최소 뷰포트, 최대 뷰포트를 설정합니다. 선형 보간 기울기와 y절편을 계산하여 clamp() 값을 출력하고, 미리보기 뷰포트 너비에서 해결된 픽셀 크기를 보여줍니다.
• Neumorphism Generator — 4가지 모양 유형(flat, concave, convex, pressed)과 distance, intensity, blur, border radius, 크기, 배경색 컨트롤.
• Image Filter Generator — 8개의 CSS 필터 함수: brightness, contrast, saturation, hue-rotate, blur, grayscale, sepia, invert. 자신의 이미지를 업로드하거나 내장된 그라디언트 플레이스홀더를 사용할 수 있습니다. 5개의 이름 있는 프리셋(Vintage, B&W, Warm, Cool, Dramatic).
• Typography Properties Generator — font-size, line-height, letter-spacing, word-spacing, text-transform, text-decoration, font-weight(100~900), font-style, text-shadow(X, Y, blur, color), 텍스트 색상을 설정합니다.
• 3D Transform Generator — rotateX/Y/Z(±180°), translateX/Y/Z(±200 px), perspective(100~2000 px), scale용 슬라이더. perspective, transform, transform-style: preserve-3d를 출력합니다.
• Keyframe Animation Builder — 애니메이션 이름을 지정하고, 드롭다운에서 CSS 속성(transform, opacity, background-color 등)을 선택하고, duration, timing function, 반복 횟수를 설정합니다. 사용자 정의 퍼센트 위치와 값으로 keyframe 정지점을 추가하거나 제거하고, 애니메이션을 라이브로 미리볼 수 있습니다.

CSS Generator Suite 사용 방법

1단계: 생성기 탭 선택

/developer/css/css-generators에서 도구를 엽니다. 인터페이스는 Box Shadow 탭에서 열립니다. 탭 바는 패널의 전체 너비에 걸쳐 있으며 작은 화면에서는 줄 바꿈됩니다. 탭을 클릭하여 생성기를 전환합니다. 각 생성기의 상태는 같은 세션 중에 탭 사이를 이동하는 동안 유지됩니다.

2단계: 컨트롤 조정

각 생성기는 동일한 패턴을 따릅니다. 한쪽(또는 위쪽)에 컨트롤, 컨트롤 아래에 라이브 미리보기, 하단에 CSS 출력 블록이 있습니다.

Box Shadow 생성기의 경우:

• 기본 shadow는 offsetX 4 px, offsetY 4 px, blur 8 px, spread 0 px, color #00000040, inset 꺼짐으로 시작합니다.
• 슬라이더를 드래그하면 흰색 미리보기 박스가 shadow를 즉시 업데이트합니다.
• 색상 견본을 클릭하면 브라우저의 기본 색상 선택기가 열립니다. 컴포넌트는 선택한 색상에 자동으로 40(16진수로 25% 불투명도)을 추가합니다.
• Inset 체크박스를 선택하면 shadow가 요소 안쪽으로 뒤집힙니다.
• "Add Shadow"를 클릭하면 두 번째 레이어가 추가됩니다. 각 레이어에는 자체 컨트롤 행과 제거를 위한 휴지통 버튼이 있습니다(마지막 남은 레이어는 제거할 수 없습니다).

Flexbox 생성기의 경우, 번호가 매겨진 4개의 박스가 현재 정렬을 보여줍니다. flex-direction을 column으로, justify-content를 space-between으로 변경하면 위치가 실시간으로 업데이트됩니다.

3단계: 생성된 CSS 읽기

CSS 출력 블록은 각 생성기의 컨트롤 아래에 모노스페이스 폰트로 나타납니다. Box Shadow의 형식은:

box-shadow: 4px 4px 8px 0px #00000040, inset 2px 2px 4px 0px #ffffff20;

Unit Converter의 경우 출력은 코드 블록 대신 4개의 클릭 가능한 카드입니다. 카드를 클릭하면 해당 값(예: 1.5rem)이 클립보드에 직접 복사됩니다.

4단계: 복사하여 붙여넣기

각 생성기의 출력 카드 오른쪽 상단 모서리에 복사 버튼이 있습니다. 클릭하면 전체 선언이 클립보드에 쓰이고 "Copied to clipboard" 토스트 알림이 표시됩니다. 스타일시트나 Tailwind 설정에 직접 붙여넣을 수 있습니다.

5단계: Fluid Typography 수식 표시 사용

Fluid Typography 탭에는 수학을 확인하거나 문서화할 수 있도록 기울기와 절편을 보여주는 수식 카드가 있습니다:

font-size = 16px + (32 - 16) * ((100vw - 320px) / (1200 - 320))
slope = 1.7241vw | intercept = -0.5rem

생성된 출력은 다음과 같습니다:

font-size: clamp(1.0000rem, -0.5rem + 1.7241vw, 2.0000rem);

실용적인 예제

레이어드 카드 Shadow

주변광과 직사광을 시뮬레이션하는 두 개의 box shadow 레이어를 사용하는 일반적인 디자인 패턴:

1. Box Shadow 탭을 엽니다.
2. Shadow 1을 offsetX 0, offsetY 2 px, blur 4 px, spread 0, color #00000020, inset 꺼짐으로 설정합니다.
3. "Add Shadow"를 클릭합니다. Shadow 2를 offsetX 0, offsetY 8 px, blur 24 px, spread 0, color #00000014, inset 꺼짐으로 설정합니다.
4. 결과를 복사합니다: box-shadow: 0px 2px 4px 0px #00000020, 0px 8px 24px 0px #00000014;

반응형 헤드라인 폰트 크기

모바일(320 px 뷰포트)에서 20 px 헤드라인이 데스크톱(1440 px)에서 48 px로 스케일:

1. Fluid Typography 탭을 엽니다.
2. 최소 폰트 크기를 20, 최대를 48, 최소 뷰포트를 320, 최대를 1440으로 설정합니다.
3. 중간 크기를 확인하기 위해 미리보기 뷰포트 슬라이더를 드래그합니다.
4. 복사: font-size: clamp(1.25rem, 0.2143rem + 3.2143vw, 3rem);

Glassmorphism 카드

어두운 그라디언트 위의 frosted-glass 알림 카드:

1. Glassmorphism 탭을 엽니다.
2. 배경색을 흰색(#ffffff), 불투명도를 15%, blur를 16 px, 테두리 불투명도를 25%, 테두리 너비를 1 px, shadow blur를 32 px, shadow 불투명도를 8%로 설정합니다.
3. 출력에는 -webkit-backdrop-filter 벤더 프리픽스가 자동으로 포함됩니다.

팁과 모범 사례

Box Shadow inset 레이어는 입력 필드에 깊이를 추가합니다. 카드의 외부 shadow와 함께 작은 inset shadow(inset 0px 2px 4px 0px #0000001a)를 사용하면 폼 필드가 오목하게 보입니다. 생성기를 통해 두 가지를 단일 멀티 레이어 선언으로 결합할 수 있습니다.

Fluid Typography 생성기에서 경계에서의 클램핑을 확인하세요. 미리보기 뷰포트 슬라이더는 280 px에서 시작하여 1920 px까지 이동합니다. 최소 및 최대 뷰포트까지 드래그하여 양쪽 끝에서 폰트 크기가 지정한 값에 정확히 유지되는지 확인하세요. clamp() 함수가 이를 보장하지만 직접 보는 것이 안심됩니다.

Cubic Bezier 생성기에서는 먼저 프리셋을 적용하세요. 10개의 이름 있는 프리셋(ease-out-back, ease-in-cubic 등)이 시작점이 됩니다. 하나를 적용한 다음 P1과 P2 슬라이더를 미세 조정합니다. canvas는 각 변경 시 곡선을 다시 그리고 모션 미리보기 블록이 애니메이션됩니다.

Unit Converter 기본 폰트 크기는 기본값이 16 px이지만 브라우저 루트가 다를 수 있습니다. 프로젝트에서 html { font-size: 62.5% }(10 px)를 설정하는 경우, 변환 전에 기본 폰트 크기 필드를 10으로 변경하세요.

Clip Path 폴리곤 프리셋은 퍼센트 기반 좌표를 생성하므로 어떤 요소 크기에서도 올바르게 스케일됩니다. star 프리셋은 10개의 점을 사용하며 CSS 전용 장식 배지로 사용됩니다.

Keyframe Animation Builder는 최소 두 개의 keyframe이 필요합니다. 두 프레임만 남으면 제거 버튼이 비활성화됩니다.

일반적인 문제 및 문제 해결

Box shadow 색상이 색상 선택기에서 처음 6개의 16진수 문자만 표시됩니다. 컴포넌트는 항상 16진수로 알파 채널로 40을 추가합니다(#rrggbbaa 형식). 기본 <input type="color">는 RGB 부분만 표시합니다. 이는 예상된 동작입니다. 알파는 25% 불투명도로 별도로 적용됩니다. 다른 불투명도가 필요하면 출력을 복사하고 마지막 두 16진수를 수동으로 조정하세요(예: 50%는 80, 100%는 ff).

Fluid Typography 생성기가 음수 intercept 값을 생성합니다. 이는 선형 방정식의 y절편이 0 아래로 떨어질 때 올바른 동작입니다. clamp() 값은 여전히 지정한 최소/최대 범위 내의 값으로 해결됩니다. 음수 intercept는 선형 보간의 아티팩트이며 버그가 아닙니다.

Glassmorphism 미리보기가 일부 브라우저에서 단색으로 나타날 수 있습니다. backdrop-filter CSS 속성은 하드웨어 가속이 필요하며 모든 환경에서 지원되지는 않습니다. 생성기는 표준 속성과 함께 -webkit-backdrop-filter 프리픽스를 출력하지만, 브라우저가 해당 속성을 지원하지 않으면 도구의 미리보기가 영향을 받습니다.

3D Transform 미리보기가 탭 전환 시 깜빡입니다. 미리보기 요소에 적용된 transition: transform 0.2s가 마운트 시 재생됩니다. 이는 탭 마운트 주기의 시각적 아티팩트이며 생성된 코드에는 영향을 주지 않습니다.

Grid Builder 자유 텍스트 열 입력은 어떤 문자열도 허용합니다. abc 1fr 같은 유효하지 않은 값을 입력하면 CSS 출력에 해당 유효하지 않은 값이 포함되고 라이브 미리보기는 조용히 브라우저 기본값으로 폴백합니다. 유효한 CSS grid 트랙 값만 사용하세요: 1fr, auto, min-content, max-content, repeat(3, 1fr), 또는 고정 픽셀/퍼센트 값.

개인 정보 보호 및 보안

CSS Generator Suite는 완전히 브라우저 내에서 실행됩니다. CSS 값, 색상 선택, 입력 데이터는 어떤 서버로도 전송되지 않습니다. 15개의 모든 생성기는 순수 JavaScript를 사용하여 출력을 계산합니다. 런타임에 외부 라이브러리가 로드되지 않습니다. Image Filter 생성기에 업로드하는 이미지는 로컬 객체 URL(URL.createObjectURL)로 열리며 네트워크를 통해 전송되지 않습니다. 페이지가 로드되면 도구는 완전히 오프라인으로 작동합니다.

자주 묻는 질문

CSS Generator Suite는 무료인가요? 네, 계정 없이 완전히 무료입니다. 페이지를 열고 즉시 생성을 시작하세요.

오프라인에서도 작동하나요? 네. 브라우저에 페이지가 로드되면, 모든 계산이 JavaScript로 로컬에서 실행되기 때문에 인터넷 연결 없이도 모든 생성기가 작동합니다.

내 데이터는 안전한가요? 입력값은 브라우저를 절대 벗어나지 않습니다. 개별 CSS 값에 대한 분석, 폼 제출, 서버 처리가 전혀 없습니다.

box shadow 레이어를 몇 개나 추가할 수 있나요? 인터페이스는 shadow 레이어 수에 상한을 두지 않습니다. 필요한 만큼 레이어를 쌓기 위해 "Add Shadow"를 계속 클릭할 수 있습니다. 브라우저는 단일 box-shadow 선언에서 쉼표로 구분된 shadow 값을 몇 개든 지원하지만, 레이어가 많으면 생성된 출력이 매우 길어질 수 있습니다.

도구가 vanilla CSS와 함께 Tailwind 클래스도 출력하나요? 설정 설명과 일부 생성기는 Tailwind 출력을 참조합니다. Unit Converter는 Tailwind 설정 파일에 적합한 원시 단위로 값을 복사합니다. 다른 생성기는 Tailwind의 style prop이나 @layer 블록에서 직접 사용할 수 있는 표준 CSS 속성 선언을 출력합니다.

clip-path 생성기 출력을 SVG에 사용할 수 있나요? 아니요. 출력은 HTML 요소에 적용되는 CSS clip-path 퍼센트 구문(예: polygon(50% 0%, 100% 100%, 0% 100%))을 사용합니다. SVG clipPath 요소는 다른 좌표계와 구문을 사용합니다.

모바일에서 cubic bezier canvas에 곡선이 표시되지 않습니다 — 버그인가요? canvas 요소는 HTML5 2D 컨텍스트를 사용하여 렌더링됩니다. 일부 모바일 브라우저에서는 스크롤 가능한 overflow 컨테이너 내의 canvas가 스크롤 이벤트가 발생할 때까지 올바르게 렌더링되지 않을 수 있습니다. 페이지를 약간 스크롤하여 다시 그리기를 트리거하거나 bezier 탭에는 데스크톱 브라우저를 사용해 보세요.

Border Radius Generator의 8값 구문 옵션은 무엇을 하나요? CSS border-radius는 슬래시로 구분된 4개의 값으로 이루어진 선택적 두 번째 세트를 허용합니다: border-radius: TL TR BR BL / TL TR BR BL. 첫 번째 세트는 각 모서리의 수평 반경을 제어하고 두 번째 세트는 수직 반경을 제어하여 타원형 모서리를 생성합니다. 이를 통해 표준 4값 구문으로는 달성할 수 없는 유기적인 blob 모양을 만들 수 있습니다.

세션 간에 설정을 저장할 수 있나요? 도구는 페이지 로드 사이에 localStorage에 설정을 유지하지 않습니다. 페이지를 다시 열면 모든 생성기가 기본값으로 재설정됩니다. 재사용하고 싶은 조합을 찾으면 즉시 CSS 출력을 편집기나 스타일시트에 복사하세요.

Fluid Typography 생성기는 min()과 max()를 사용하나요, 아니면 clamp()를 사용하나요? 생성기는 clamp(min, preferred, max)를 출력합니다. preferred 값은 선형 보간 표현식(intercept + slope * vw)입니다. 이것은 현대의 권장 방식이며 모든 현재 브라우저에서 지원됩니다.

관련 도구

• CSS Generators — 스위트 자체. 아래의 전문 도구로 다루지 않는 모든 것에 사용.
• Type Scale Generator — 음악적 비율로 완전한 모듈식 타이포그래픽 스케일을 구축하여 CSS 변수, SCSS 변수, 또는 Tailwind fontSize 설정 블록을 출력합니다.
• Glitch Effect Generator — 사용자 정의 가능한 색상, 속도, 강도로 애니메이션 CSS glitch 텍스트 효과를 생성합니다.
• Color Converter — CSS 생성기 입력에 사용하기 위해 hex, RGB, HSL 및 기타 색상 형식을 변환합니다.
• Gradient Generator — 라이브 미리보기로 CSS 그라디언트 배경을 만듭니다.

지금 CSS Generator Suite 사용해보기: CSS Generator Suite