손쉽게 아름다운 CSS 상자 그림자 만들기
직관적인 인터페이스로 멋진 상자 그림자를 생성하십시오. CSS 코드를 복사하여 프로젝트에서 즉시 사용할 수 있습니다.
Preview
상자 그림자
사용자 정의
CSS 출력
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
그림자 컨트롤
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
소프트 섀도우
미디엄 섀도우
헤비 섀도우
내부 그림자
샤프 대각선
개요 광선
더블 섀도우
리프트 효과
사용하는 방법
기본 컨트롤
- 조정수평 오프셋을 클릭하여 그림자를 왼쪽이나 오른쪽으로 이동합니다
- 조정수직 오프셋(Vertical Offset)을 클릭하여 그림자를 위 또는 아래로 이동합니다.
- 를 늘리십시오.흐림 반경그림자를 더 부드럽게 만들기 위해
- Use 확산 반경그림자의 전체 크기를 늘리거나 줄입니다
- 변경Color and Opacity그림자 모양을 사용자 지정하려면
고급 기능
- Enable 삽입 그림자내부 그림자 효과를 만들려면
- Use 다중 그림자더 복잡한 효과를 위해
- 저장 및 불러오기Presets좋아하는 그림자에 빠르게 액세스할 수 있습니다.
- Click 랜덤 섀도우영감을 얻기 위해
- 생성된 CSS 코드를 복사하여 프로젝트에 붙여넣습니다.
Related Tools
Sass to CSS 변환기
Sass 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
완벽한 Flexbox 레이아웃 만들기
직관적인 드래그 앤 드롭 인터페이스를 사용하여 CSS flexbox 코드를 시각화, 사용자 정의 및 생성할 수 있습니다.
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
나이 계산기
정확한 나이 계산기로 정확한 나이를 년, 월, 일 단위로 계산하십시오.
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
Create Custom Terms and Conditions
웹사이트, 앱 또는 서비스에 맞는 포괄적인 이용 약관을 생성하세요.