색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS 그림자 생성기
이동, 흐림, 확산, 색상과 불투명도를 조절해 안쪽·바깥쪽 그림자를 미리 보고 CSS를 얻습니다.
미리보기
도구 소개
카드의 깊이감을 조정할 때 흐림과 확산을 나누어 확인하세요. 확산 값을 음수로 주면 그림자 윤곽이 작아집니다.
사용 방법
값을 바꾸면 미리보기가 즉시 갱신됩니다. 안쪽 그림자를 선택하면 inset이 됩니다. 이동과 확산은 -200–200px, 흐림은 0–200px, 불투명도는 0–100%입니다. 한 겹의 box-shadow를 생성하며 복사하거나 CSS 파일로 저장할 수 있습니다.
자주 묻는 질문
흐림 반경과 확산 반경은 어떻게 다른가요?
흐림은 가장자리를 부드럽게 하고 확산은 윤곽의 크기를 바꿉니다. inset은 안쪽 그림자입니다. 한 번에 한 겹만 만들므로 여러 겹은 CSS에서 직접 조합하세요.
그림자를 왼쪽이나 위로 옮기려면?
가로 오프셋을 음수로 하면 왼쪽, 세로를 음수로 하면 위로 갑니다. 양수는 오른쪽과 아래입니다. box-shadow는 상자 기준이며 이미지의 불투명 영역 윤곽을 따라가지 않습니다.
관련 도구
새 탭에서 열립니다
댓글
0