KOENJP

박스 섀도우 CSS 생성기 (여러 겹 그림자)

BOX · SHADOW

그림자 레이어를 여러 겹 쌓고 순서를 바꾸며 X · Y · 흐림 · 퍼짐 · 색 · 투명도 · inset을 조절해요. 부드럽게 · 뉴모피즘 · 겹겹이 · 글로우 프리셋, CSS와 유틸리티 클래스용 임의 값 코드를 복사해요.

프리셋

미리보기

Card

그림자 레이어

    레이어 1 조절

    색
    
      
    여러 레이어는 쉼표로 이어져요. 위에 있는 레이어가 앞(위)에 그려져요.
    
    
    

    
    이 브라우저 안에서만 처리돼요. 서버로 보내지 않아요.
    
  
    
  
    

    



    
  
    
    
    
      HOW TO
      
    사용 방법
    
      
      
      
    1. 프리셋(부드럽게 · 뉴모피즘 · 겹겹이 · 글로우 등) 중 하나를 골라 시작해요.
      2. 
      
    2. 레이어 목록에서 그림자를 고르고 X · Y · 흐림 · 퍼짐 · 투명도 · 색 · inset을 조절해요.
      3. 
      
    3. + 레이어 추가로 그림자를 더 쌓고, ↑ ↓로 순서를 바꾸거나 ×로 지워요. 배경 · 카드 색 · 모서리도 바꿔 미리 봐요.
      4. 
      
    4. CSS 또는 Tailwind 형식을 골라 코드 복사를 눌러요.
      5. 
      
    
    
    
    
    
      PAIRS WELL WITH
      
    같이 쓰기 좋은 도구
    
      
    
    
  
    
  
  
    
    FAQ
    
    자주 묻는 질문
    
    
    그림자를 여러 겹 쌓으면 뭐가 좋아요?
    작고 진한 그림자와 크고 흐린 그림자를 함께 쓰면 실제 빛처럼 자연스러운 깊이가 생겨요. 겹겹이 · 떠 있는 카드 프리셋이 그런 예예요.
    
    
    레이어 순서는 어떤 의미예요?
    box-shadow는 쉼표로 이어진 값 중 앞에 있는 것이 위(앞)에 그려져요. 목록의 맨 위 레이어가 가장 앞이에요.
    
    
    뉴모피즘은 어떻게 만들어요?
    배경과 카드 색을 같게 두고 한쪽은 어두운 그림자, 반대쪽은 밝은 그림자를 줘요. 뉴모피즘 프리셋을 고르면 바로 볼 수 있어요.
    
    
    Tailwind 코드는 어떻게 써요?
    shadow-[...] 형태의 임의 값으로 나와요. 띄어쓰기는 _로 바뀌니 그대로 class에 붙여 넣으면 돼요.