CSS 상자 그림자 생성기 정보
값을 추측하는 대신 현실적인 고도를 구축하세요. 수평 및 수직 오프셋, 흐림, 확산, 색상 및 불투명도를 조정하고 깊이를 위해 여러 레이어를 쌓은 다음 정확한 CSS 규칙을 복사합니다.
사용방법
- 1오프셋 및 흐림 설정슬라이더를 드래그하거나 정확한 픽셀 값을 입력하세요. 미리보기 카드는 즉시 업데이트됩니다.
- 2색상 및 불투명도 선택색상 선택기와 알파 슬라이더를 사용하여 어두운 모드 그림자를 포함하여 팔레트와 일치시키세요.
- 3CSS를 복사하세요더 부드럽고 자연스러운 그림자가 필요한 경우 레이어를 더 추가한 다음 상자 그림자 선언을 복사하세요.
왜 이 css 상자 그림자 생성기을 사용합니까?
- 기기에서 아무것도 남지 않습니다.. 작업은 브라우저 탭에서 이루어집니다. 이 앱에는 업로드 엔드포인트가 없으므로 귀하의 파일과 텍스트는 저장, 기록 또는 볼 수 없습니다.
- 업로드가 없습니다.. 서버 왕복을 완전히 건너뜁니다. 결과는 네트워크 속도나 대기열 크기가 아닌 자체 CPU에 따라 제한됩니다.
- 무료, 계정 없음, 할당량 없음. 가입 장벽도 없고, 워터마크도 없고, 일일 한도도 없습니다. 선택적 계정은 여러 장치에 걸쳐 즐겨찾기와 사전 설정을 저장하기 위해서만 존재합니다.
자주 묻는 질문
내 디자인이 여기서 사용해도 안전한가요?
예. 이 도구는 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 붙여넣거나 연 내용은 서버로 전송되지 않으며, 페이지를 닫은 후에도 페이지에는 사본이 보관되지 않습니다.
계정을 만들어야 하나요?
아니요. 로그인하지 않고도 모든 도구를 완전히 사용할 수 있습니다. 계정은 저장된 즐겨찾기와 재사용 가능한 사전 설정만 추가합니다.
전화에서 작동합니까?
예. 인터페이스는 큰 터치 대상과 스택형 레이아웃을 갖춘 모바일 우선이므로 데스크톱은 물론 휴대폰, 태블릿에서도 작동합니다.
자연스러운 그림자를 만들려면 어떻게 해야 하나요?
작은 네거티브 스프레드, 큰 흐림 및 낮은 불투명도를 사용하고 옆쪽보다 아래쪽으로 더 많이 오프셋합니다. 일반적으로 불투명도가 낮은 레이어 2~3개를 쌓는 것이 무거운 그림자 1개를 쌓는 것보다 더 좋아 보입니다.
내 그림자가 잘린 것처럼 보이는 이유는 무엇입니까?
상위 요소에 오버플로가 숨겨져 있거나 그림자가 주변 패딩보다 넓을 수 있습니다. 흐림 효과를 렌더링할 공간이 있도록 요소 주위에 여백이나 패딩을 추가합니다.