CSS 그림자, 그라데이션 생성기

슬라이더로 box-shadow를 여러 겹 쌓고, linear, radial, conic 그라데이션을 만들어 바로 미리 봅니다. 만든 CSS는 눌러서 복사하세요.

색 안쪽 그림자 (inset)

상자 바탕

모서리

모양 형태

각도

가로 중심

세로 중심

모두 이 브라우저 안에서 만듭니다. 마지막 상태는 이 브라우저에 저장되고, 「링크 복사」로 다른 사람에게 그대로 보낼 수 있습니다.

알아 둘 것

box-shadow 순서 가로 세로 흐림 퍼짐 색. 쉼표로 여러 겹을 쓰면 앞에 쓴 겹이 위에 그려집니다
자연스러운 그림자 옅은 그림자 두세 겹을 겹치고, 퍼짐을 음수로 두면 상자 밖으로 덜 번져 실제 빛에 가까워집니다
inset 상자 안쪽에 그림자를 그립니다. 눌린 버튼이나 입력칸에 씁니다
그라데이션 각도 0deg는 아래에서 위, 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다
투명으로 흐리기 같은 색의 불투명도 0%와 100%를 이으면 회색이 끼지 않고 깔끔하게 사라집니다
브라우저 지원 여기서 만드는 CSS는 접두어 없이 최신 브라우저(Chrome, Safari, Firefox, Edge)에서 그대로 동작합니다