KOEN

그라디언트 · 박스섀도우 CSS 생성기

GRADIENT · SHADOW

linear·radial·conic 그라디언트와 여러 겹 box-shadow를 미리 보며 CSS 코드로 복사해요.


        
PRESETS
CARD 미리보기 카드

        
PRESETS
HOW TO

사용 방법

  1. 상단에서 '그라디언트' 또는 '박스 섀도우' 탭을 고르거나 아래 프리셋을 눌러 시작해요.
  2. 그라디언트는 Linear·Radial·Conic 종류와 각도·중심 위치를 정하고, 색 막대 빈 곳을 클릭해 스톱을 추가하거나 핸들을 드래그해 위치를 옮겨요.
  3. 박스 섀도우는 '레이어'를 추가해 X·Y 오프셋, blur, spread, 색·불투명도, inset을 레이어마다 조절해요.
  4. 미리보기를 확인하고 'CSS 복사'(속성 이름 포함)나 '값만 복사'를 눌러 코드에 붙여넣어요.
PAIRS WELL WITH

같이 쓰기 좋은 도구

FAQ

자주 묻는 질문

그라데이션 색을 반투명하게 만들 수 있나요?

각 컬러 스톱마다 불투명도(α)를 0~100으로 정할 수 있어요. 100 미만이면 rgba()로 출력되고, 미리보기 뒤의 체크무늬로 투명한 정도를 확인할 수 있어요.

컬러 스톱은 어떻게 추가하고 삭제해요?

색 막대 빈 곳을 클릭하거나 '+ 스톱 추가'를 누르면 그 위치의 중간색으로 스톱이 생겨요. 삭제는 목록의 ✕ 버튼이나, 핸들을 선택한 뒤 Delete 키로 해요. 스톱은 최소 2개가 필요해요.

box-shadow를 여러 겹 쓰면 뭐가 좋아요?

가까운 짙은 그림자와 멀리 퍼지는 옅은 그림자를 겹치면 실제 빛처럼 자연스러운 깊이가 생겨요. 레이어는 8개까지 쌓을 수 있고, '이 레이어 사용'을 끄면 지우지 않고 잠시 뺄 수 있어요.

생성된 CSS는 모든 브라우저에서 동작하나요?

벤더 프리픽스 없는 표준 문법이라 크롬·사파리·엣지·파이어폭스 최신 버전에서 동작해요. 단, conic-gradient는 인터넷 익스플로러 같은 아주 오래된 브라우저에서는 지원되지 않아요.