CSS 그림자·그라디언트 만들기
카드에 자연스러운 그림자를 주려면 CSS 를 어떻게 쓸까?
box-shadow 는 x·y·흐림·퍼짐·색 순서로 쓰고 쉼표로 겹칩니다.
CSS Backgrounds·Images 표준 기준 · box-shadow · linear-gradient · radial-gradient · 업데이트
미리보기
결과가 이상한가요?
어떻게 계산했나요
CSS Backgrounds·Images 표준 기준 · box-shadow · linear-gradient · radial-gradient
- box-shadow: [inset] x y 흐림 퍼짐 색, 쉼표로 여러 겹 (CSS Backgrounds and Borders Level 3)
- linear-gradient(각도, 색 위치%, …)·radial-gradient(모양, 색 위치%, …) (CSS Images Level 3)
- 색의 불투명도는 rgb(r g b / a) 로 씁니다. 모든 현재 브라우저가 읽습니다
자주 묻는 질문
box-shadow 값은 어떤 순서인가요?
[inset] 가로 이동 세로 이동 흐림 퍼짐 색 순서입니다. 예: 0 4px 12px -2px rgb(0 0 0 / 0.15). 흐림은 음수가 될 수 없고, 퍼짐을 음수로 주면 그림자가 안쪽으로 줄어 더 자연스럽습니다.
그림자를 여러 겹 쓰는 이유는?
가까이 짙은 작은 그림자와 멀리 옅은 큰 그림자를 쉼표로 겹치면 실제 빛처럼 부드럽게 보입니다. 앞에 쓴 그림자가 위에 그려집니다.
그라디언트 각도는 어느 쪽인가요?
linear-gradient 의 0deg 는 아래에서 위로, 90deg 는 왼쪽에서 오른쪽으로, 180deg 는 위에서 아래로 칠합니다. 위치(%)는 그 방향을 따라 색이 놓이는 자리입니다.
다크 모드에서도 그림자가 보이나요?
어두운 배경에서는 검은 그림자가 잘 보이지 않습니다. 다크 모드에서는 그림자 대신 테두리나 조금 밝은 배경으로 층을 나누는 경우가 많습니다.