CSS 그림자 만들기

CSS 그림자 만들기 사용법

웹 페이지의 카드, 버튼, 팝업에 주는 그림자(box-shadow)와 글자에 주는 그림자(text-shadow)를 숫자를 바꿔 가며 눈으로 확인하고 CSS 코드로 받는 도구입니다. 그림자 값은 숫자만 봐서는 결과를 짐작하기 어렵고, 자연스러운 그림자는 대개 여러 겹을 겹쳐야 나오기 때문에 겹을 쌓고 순서를 바꾸는 기능에 무게를 두었습니다.

쓰는 순서

1. 위에서 상자 그림자나 글자 그림자 탭을 고릅니다.
2. 본보기에서 비슷한 것을 하나 불러옵니다. 상자는 은은하게, 떠 있는 카드, 또렷한 판, 눌린 홈, 볼록한 단추, 빛 테두리가 있고 글자는 은은하게, 외곽선, 네온, 겹친 글자, 깊이감이 있습니다.
3. 그림자 겹의 숫자를 바꿉니다. 바꾸는 즉시 위쪽 미리보기에 반영됩니다.
4. 바탕 색과 상자 색을 실제로 쓸 화면의 색으로 맞춰 봅니다. 그림자는 바탕에 따라 전혀 다르게 보입니다.
5. CSS 복사로 코드를 가져가거나 CSS 파일 저장으로 파일을 받습니다.

겹의 값 여섯 가지

겹마다 있는 복제는 같은 값의 겹을 바로 아래에 하나 더 만들고, 위쪽 세모 버튼은 겹을 한 칸 위로 올립니다. 코드에서 먼저 적힌 겹이 화면에서는 앞쪽에 그려지므로, 진하고 좁은 그림자를 위에 두고 옅고 넓은 그림자를 아래에 두는 것이 보통입니다. 겹 추가로 8겹까지 쌓을 수 있습니다.

예시: 떠 있는 카드

상자 그림자 탭을 처음 열면 "떠 있는 카드" 본보기가 들어 있고 코드는 다음과 같습니다.

box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 12px 24px -4px rgba(0, 0, 0, 0.14), 0 28px 48px -8px rgba(0, 0, 0, 0.12);

첫 겹은 카드 바로 아래의 좁고 또렷한 그림자, 둘째와 셋째 겹은 멀리 넓게 퍼지는 그림자입니다. 세 겹 모두 번짐이 음수라 카드 옆으로는 거의 보이지 않고 아래쪽에만 깔립니다. 화면에서는 읽기 쉽게 겹마다 줄을 바꿔 보여 주며, 겹마다 줄 바꿔 적기를 끄면 위처럼 한 줄로 나옵니다.

색 표기 고르기

• rgba(0, 0, 0, 0.2): 가장 널리 쓰이고 오래된 브라우저에서도 동작합니다. 기본값입니다.
• rgb(0 0 0 / 20%): 쉼표 없이 적는 새 표기입니다. 최근 브라우저 기준으로 작성하는 프로젝트에 맞습니다.
• 8자리 HEX: #00000033처럼 마지막 두 자리가 불투명도입니다. 디자인 도구에서 넘겨받은 값과 맞출 때 편합니다.

글자 그림자

글자 그림자 탭에서는 보기 글자와 글자 크기를 바꿔 가며 확인합니다. 글자 그림자에는 번짐과 안쪽이 없어 값이 네 가지입니다. "외곽선" 본보기는 흐림 없는 그림자를 대각선 네 방향으로 1px씩 옮겨 테두리처럼 보이게 한 것이고, "네온"은 이동 없이 흐림만 다른 세 겹을 겹쳐 빛이 번지는 느낌을 냅니다. 사진 위에 흰 글자를 올릴 때는 "은은하게"처럼 어두운 그림자 한 겹만 깔아도 훨씬 잘 읽힙니다.

본보기를 한 번에 받기

본보기 전체를 CSS 파일로 저장을 누르면 상자 그림자 6종과 글자 그림자 5종이 .shadow-soft, .shadow-card, .text-shadow-neon 같은 클래스 이름으로 정리된 shadows.css 파일을 받습니다. 프로젝트에 넣어 두고 필요한 클래스만 골라 쓰면 됩니다.

알아 둘 점

• "볼록한 단추"는 바탕과 상자의 색이 같을 때만 제대로 보입니다. 본보기를 누르면 두 색이 같은 회색으로 함께 바뀝니다. 이 방식은 버튼의 경계가 흐려 눈이 나쁜 사람에게는 잘 보이지 않으므로 중요한 버튼에는 권하지 않습니다.
• 그림자는 요소가 차지하는 자리에 포함되지 않습니다. 그림자가 잘려 보이면 부모 요소의 overflow가 hidden인지 확인하세요.
• 마지막으로 만든 그림자는 탭별로 이 브라우저에 기억됩니다. 처음으로를 누르면 기본 본보기로 돌아갑니다.