Handytool
개발자무료로컬에서 실행

CSS 상자 그림자 생성기

실시간 미리보기로 CSS 상자 그림자 값을 설계합니다——오프셋, 흐림, 확산, 불투명도, 삽입.

미리보기
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

슬라이더를 조정하여 그림자를 설계합니다 — 올바르게 보이면 CSS를 복사합니다.

CSS 상자 그림자 생성기 소개

Handytool의 CSS 상자 그림자 생성기는 오프셋, 흐림, 확산, 색, 불투명도에 대한 슬라이더를 제공하고 드래그할 때 업데이트되는 실시간 미리보기 카드가 있습니다. 삽입 그림자를 전환하고, 색상 선택기로 색을 조정하고, 생성된 상자 그림자 CSS 선언을 스타일시트에 직접 복사합니다. 전체 도구는 브라우저에서 실행됩니다. 업로드 없음.

CSS 상자 그림자 생성기 기능

  • 01

    모든 매개변수가 슬라이더

    가로 및 세로 오프셋, 흐림 반지름, 확산 반지름, 불투명도는 각각 슬라이더와 숫자 입력이 있으며, 드래그로 미세 조정한 후 키보드로 픽셀 정밀도로 조정합니다.

  • 02

    삽입 그림자 지원

    삽입 그림자 토글을 전환하여 드롭 그림자와 내부 그림자 사이를 전환합니다——누른 버튼, 가라앉은 입력, 뉴모르피즘 표면에 유용합니다.

  • 03

    색상 및 불투명도 개별 제어

    색상 선택기에서 16진수 값으로 기본 색상을 선택한 다음 불투명도를 독립적으로 조정합니다. 출력은 rgba()를 사용하므로 CSS를 복사할 때 색상과 알파가 읽을 수 있게 유지됩니다.

CSS 상자 그림자 생성기 자주 묻는 질문

확산 값은 무엇을 합니까?
긍정적인 확산은 흐림이 적용되기 전에 모든 방향으로 그림자를 확대합니다. 음수 확산은 그것을 축소합니다. 작은 흐림과 쌍을 이룰 때 타이트하고 정의된 빛에 유용합니다.
여러 그림자를 추가할 수 있습니까?
이 생성기는 단일 그림자 선언을 출력합니다. 그림자를 계층화하려면 값을 복사하고 CSS에서 쉼표로 구분하여 두 번 붙여넣습니다——상자 그림자는 쉼표로 구분된 목록을 허용합니다.
내 삽입 그림자가 보이지 않는 이유는 무엇입니까?
삽입 그림자는 요소 내부에 그려지므로 표시하려면 배경색 또는 패딩이 필요합니다. 투명하거나 크기가 0인 요소에도 표시되지 않습니다.
미리보기가 픽셀 정확합니까?
예——미리보기는 실제 요소에서 실제 CSS 상자 그림자 속성을 사용하므로 보이는 내용이 스타일시트가 정확히 렌더링하는 내용입니다.

관련 도구

개발자 →

다른 도구 둘러보기

모든 도구 →