그림자 생성기

CSS box-shadow와 text-shadow를 시각적으로 생성하고 코드를 복사하세요

그림자 타입

그림자 레이어

#1

X4px

Y4px

B10px

S0px

%25%

CSS 코드box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

프리셋 그림자

사용 방법

그림자 타입(box-shadow / text-shadow)을 선택하세요

각 레이어의 오프셋, 블러, 스프레드, 색상, 투명도를 조절하세요

레이어를 추가하거나 프리셋을 선택하세요

CSS 코드를 복사하여 프로젝트에 적용하세요

그림자 팁

은은한 그림자를 사용하면 모던하고 깔끔한 느낌을 줄 수 있습니다
여러 그림자를 겹쳐 사용하면 깊이감과 사실감을 더할 수 있습니다
그림자 색상을 요소 주변 색상과 맞추면 자연스러운 효과를 얻을 수 있습니다
inset 그림자는 눌린/오목한 UI 효과에 적합합니다
모바일에서는 성능을 위해 지나치게 큰 블러 값을 피하세요

자주 묻는 질문

box-shadow란?

box-shadow는 요소의 프레임 주위에 그림자 효과를 추가하는 CSS 속성입니다. X/Y 오프셋, 블러, 스프레드, 색상을 설정할 수 있으며, inset 키워드로 안쪽 그림자도 만들 수 있습니다.

text-shadow란?

text-shadow는 텍스트 콘텐츠에 그림자를 추가하는 CSS 속성입니다. X/Y 오프셋과 블러를 설정할 수 있으며, 스프레드와 inset은 지원하지 않습니다.

여러 그림자를 사용할 수 있나요?

네, CSS는 쉼표로 구분된 여러 그림자 값을 지원합니다. 여러 레이어를 조합하면 더 깊고 사실적인 그림자 효과를 만들 수 있습니다.

관련 도구

그래디언트 생성기 보더 라디우스 생성기 색상 코드 변환

링크가 복사되었습니다!