React Native 그림자 생성기

React Native 그림자를 시각적으로 디자인하고 iOS shadow* 속성과 Android elevation을 담은 스타일 객체를 복사하세요 — 100% 브라우저에서 처리, 업로드 없음

React Native 그림자 생성기

그림자를 시각적으로 디자인하고 바로 붙여넣을 수 있는 React Native 스타일 객체를 복사하세요 — iOS shadow* 속성과 Android elevation을 함께 출력합니다.

#000000

React Native 스타일 객체

{
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 4,
  elevation: 5,
}

미리보기는 CSS box-shadow를 쓰지만 React Native는 이를 사용할 수 없습니다. 위의 스타일 객체를 복사하세요: iOS는 shadowColor / shadowOffset / shadowOpacity / shadowRadius를 읽고, Android는 elevation으로 그림자를 그립니다.

🔒 브라우저에서 실행되며 업로드되지 않습니다.

React Native 그림자를 시각적으로

불투명도·반경·오프셋·elevation 슬라이더를 조절하고 색상을 고른 뒤 바로 붙여넣을 수 있는 React Native 스타일 객체를 복사하세요. 미리보기 상자는 근사한 CSS box-shadow로 그림자를 보여주므로 앱에 넣기 전에 결과를 확인할 수 있습니다.

왜 box-shadow를 쓰지 못하나요?

React Native는 CSS box-shadow 속성을 이해하지 못합니다. iOS는 shadowColor·shadowOffset·shadowOpacity·shadowRadius로, Android는 elevation 값으로 그림자를 그립니다. 이 도구는 둘 다 한 번에 출력하여 두 플랫폼에서 모두 동작합니다.

자주 묻는 질문

iOS 속성과 Android elevation이 왜 둘 다 필요한가요?

iOS는 shadowColor·shadowOffset·shadowOpacity·shadowRadius 속성을 읽지만 Android는 이를 무시하고 elevation 값으로 그림자를 그리기 때문에 둘 다 포함합니다.

미리보기가 실제와 똑같나요?

미리보기는 CSS box-shadow로 iOS 그림자를 흉내 낸 것입니다. 실제 기기에서의 렌더링, 특히 Android의 elevation은 조금 다를 수 있으니 대략적인 기준으로 보세요.