최고의 무료 CSS 상자 그림자 생성기
라이브 미리보기, 삽입 및 두 번째 레이어를 사용하여 CSS 박스 그림자를 시각적으로 구축합니다.
100% 무료
가입 없음
워터마크 없음
사랑 Best.Free? 공유하세요
어떻게 작동하는지
- 슬라이더 이동. 오프셋, 블러, 스프레드, 색상 및 불투명도를 설정합니다. 내부 그림자를 원하는 경우 삽입을 토글합니다.
- 미리보기 보기. 드래그하면 라이브 상자가 업데이트되며, 깊이를 위해 고급 옵션에서 두 번째 레이어를 추가합니다.
- CSS 복사. CSS 복사를 누르고 박스 그림자 규칙을 스타일시트에 붙여넣습니다.
이 도구에 대해
픽셀 값을 추측하지 않고도 박스 그림자를 디자인할 수 있습니다. 오프셋 X, 오프셋 Y, 흐리기 및 확산 슬라이더를 드래그하고 그림자 색상을 선택하고 불투명도를 다이얼하고 실시간으로 박스 업데이트를 미리 보고 정확한 박스 그림자 CSS를 복사합니다. 내부 그림자를 위해 삽입 토글을 뒤집습니다. 고급 옵션은 두 번째 그림자 레이어를 스택하여 현대 카드와 버튼에 사용되는 부드러운 다층 그림자를 만들 수 있습니다. 모든 기능이 브라우저에서 실행됩니다.
사람들이 그것을 사용하는 이유
- 카드 및 모달에 부드러운 그림자 추가
- 입력 및 웰에 대한 내부(삽입) 그림자 생성
- 현실적인 분산 그림자를 위해 두 레이어를 스택
- 디자인 모형과 일치하도록 오프셋 및 블러 조정
자주 묻는 질문
오프셋-X/Y는 그림자를 수평 및 수직으로 이동시키고, 블러는 가장자리를 부드럽게 하고, 스프레드는 블러가 적용되기 전에 전체 그림자를 커지거나 축소시킵니다. 라이브 미리보기는 각 변경 사항을 즉시 보여줍니다.
Inset은 그림자를 요소 뒤에 그릴 것이 아니라 요소 안에 그립니다. 입력 및 전환에 유용한 압축된 모습을 제공합니다.
색상을 선택하고 불투명도 슬라이더를 사용합니다. 도구는 rgba() 값을 출력하여 그림자가 자연스럽게 혼합됩니다.
고급 옵션을 열어 자체 오프셋, 블러, 컬러 및 삽입을 가진 두 번째 그림자 레이어를 활성화합니다.
생성기는 브라우저에서 전적으로 실행되며, 슬라이더는 로컬로 CSS 문자열을 계산합니다.
완전히 무료, 계정 및 제한 없음 - 측정 할 아무것도없는 클라이언트 측면 도구.
네. 브라우저에서 실행되므로 CSS Box Shadow Generator는 휴대폰과 태블릿뿐만 아니라 데스크탑에서도 작동합니다.
일반적으로 일반적인 파일에 대해 몇 초 만에 CSS Box Shadow Generator는 입력을 제공하는 순간 작동을 시작합니다.
캐주얼 사용은 모든 사람에게 빠르게 유지하는 관대 한 공정 사용 캡 아래 무제한입니다.
모든 현대 브라우저 - 크롬, 사파리, 파이어 폭스 및 에지. CSS Box Shadow Generator는 이미 사용 중인 브라우저를 넘어 설치 할 필요가 없습니다.