반응형
Web Development · CSS Text
CSS text-shadow —
텍스트 그림자 · 다중 그림자 · 불꽃 효과
기본 4개 값 + 여러 그림자를 콤마로 겹쳐 화염·네온·입체 효과까지
/* 기본 — 단순 그림자 */ .shadow1 { text-shadow: 1px 1px; } .shadow2 { text-shadow: 5px 5px 3px #f00; } .shadow3 { text-shadow: 7px -7px 5px #000; } /* 다중 — 콤마로 여러 그림자 */ .fire { text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20; }
HTML5
HTML5
HTML5
HTML5
1 4가지 값 — 그림자 설정
text-shadow: x-offset y-offset blur color;| 위치 | 의미 | 예 |
|---|---|---|
| 1번째 (필수) | x — 가로 이동 (양수=오른쪽) | 5px |
| 2번째 (필수) | y — 세로 이동 (양수=아래) | 5px |
| 3번째 (선택) | blur — 흐림 정도 | 3px |
| 4번째 (선택) | color — 그림자 색 | #f00 |
반응형
2 콤마로 여러 그림자 — 효과의 핵심
콤마(,)로 여러 그림자를 겹쳐서 사용. 각 그림자가 차곡차곡 쌓여 입체·네온·화염 등 다양한 효과 가능.
※ 화염 효과는 위쪽으로 점점 더 흐려지고 빨간색이 도는 그림자 5개를 겹친 결과. 음수 y로 위쪽 + 점점 큰 blur + 노랑→주황→빨강 그라디언트.
3 자주 쓰는 패턴
※ 가독성 향상:
※ 입체 효과:
※ 네온:
text-shadow: 0 1px 2px rgba(0,0,0,0.3); — 사진 위 글자 가독성 ↑※ 입체 효과:
text-shadow: 1px 1px 0 #555, 2px 2px 0 #aaa;※ 네온:
color:#fff; text-shadow: 0 0 8px #0ff, 0 0 20px #0ff;핵심 한 줄 요약
x y blur color기본 4가지 값
x, y필수 — 양수=오른쪽·아래
blur선택 — 흐림 정도
color선택 — 기본은 글자색
콤마 다중여러 그림자 겹쳐 효과 만들기
실무 활용가독성·입체·네온·화염
Tags
#text-shadow #텍스트그림자 #다중그림자 #불꽃효과 #네온 #letter-spacing #blur #CSS #HTML #입체효과 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
text-shadow, 텍스트그림자, 다중그림자, 불꽃효과, 네온, blur, CSS, HTML, 입체효과, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS 웹폰트 — @font-face 로컬 폰트 완전 정리 (0) | 2026.05.03 |
|---|---|
| CSS text-transform — 대소문자 변환 완전 정리 (0) | 2026.05.03 |
| CSS text-overflow — 말줄임표 ellipsis 완전 정리 (0) | 2026.05.03 |
| CSS text-indent — 첫 줄 들여쓰기 완전 정리 (0) | 2026.05.03 |
| CSS text-decoration — 밑줄 · 취소선 완전 정리 (0) | 2026.05.03 |
댓글