실시간 미리보기 CSS text-shadow 생성기
CSS text-shadow를 최대 8겹까지 쌓으세요 — 오프셋·흐림·색상·불투명도를 지정하면 rgba()로 출력되어 그림자만 따로 옅게 할 수 있습니다.
CSS text-shadow 생성기
프리셋
CSS 직접 고치기
미리보기를 끌거나, 미리보기에 초점을 두고 방향키를 눌러 선택한 그림자를 옮깁니다.
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
[text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]
이 text-shadow 생성기가 하는 일
가로 오프셋, 세로 오프셋, 흐림 반경 슬라이더를 움직이고 그림자 색상을 고른 뒤 불투명도를 설정하면, 이 도구가 유효한 CSS text-shadow 값을 실시간으로 만들어 줍니다. 코드 위의 샘플 텍스트가 즉시 갱신되어 확정하기 전에 그림자가 어떻게 드리우는지 정확히 확인할 수 있고, 한 번 클릭하면 스타일시트에 바로 붙여넣을 수 있는 text-shadow: …; 선언문 전체가 복사됩니다. 모든 값이 단순하고 예측 가능한 범위로 조절되므로 부드러운 드롭 섀도, 또렷한 오프셋, 은은한 글로를 맞출 수 있고, 슬라이더 옆 숫자 칸에는 슬라이더 끝을 넘는 값도 입력할 수 있습니다. 부드럽게·선명하게·멀리·빛번짐·네온·불꽃·외곽선·양각·입체 돌출·레트로 프리셋에서 시작할 수 있고, 프리셋 되돌리기로 덮어쓴 그림자를 되살릴 수 있습니다. 미리보기 글자를 직접 입력하고 미리보기 배경과 글자 색을 정하면 실제로 쓸 화면과 같은 조건에서 그림자를 볼 수 있습니다. 프리셋 줄 끝의 무작위 버튼은 아이디어가 필요할 때 새 그림자를 만들어 주고, 프리셋 되돌리기로 그 전의 그림자를 되살릴 수 있습니다. 색상 선택기 옆 ‘그림자 색상 직접 입력’ 칸은 hex, rgb(), hsl(), CSS 색 이름을 읽고 색에 투명도가 들어 있으면 불투명도도 함께 가져오며, 빠른 색 줄(회색, 그다음 선명한 색)은 선택한 그림자의 색을 한 번에 바꿉니다.
그림자 값이 만들어지는 방법
CSS text-shadow는 offset-x offset-y blur-radius color 형식으로 작성됩니다. 이 도구는 두 오프셋과 흐림 값을 단위에서 고른 단위(기본은 px, 또는 em·rem)로 받아 선택한 색상과 이어 붙입니다. 색상은 rgba()로 표현되며, hex 색상의 빨강·초록·파랑 채널과 불투명도 슬라이더를 결합해 색조를 바꾸지 않고도 그림자를 옅게 만들 수 있습니다. 양수 X는 그림자를 오른쪽으로, 양수 Y는 아래쪽으로 밀며 음수 값은 반대 방향으로 이동시키고, 흐림 값이 클수록 가장자리가 부드러워집니다. 같은 슬라이더 위치는 항상 같은 코드를 만듭니다.
자주 묻는 질문
오프셋 X, 오프셋 Y, 흐림 값은 무엇을 의미하나요?
오프셋 X는 그림자를 좌우로, 오프셋 Y는 위아래로 이동시키고, 흐림은 가장자리가 얼마나 부드러운지를 결정합니다. 흐림이 0이면 또렷한 하드 섀도가 되고, 값이 클수록 그림자가 퍼져 텍스트 뒤로 부드러운 글로처럼 번집니다.
왜 색상이 hex가 아니라 rgba로 출력되나요?
rgba()를 사용하면 불투명도 슬라이더 값을 그림자 값에 바로 반영할 수 있어, 색을 바꾸지 않고도 그림자를 반투명하게 만들 수 있습니다. 빨강·초록·파랑 채널은 선택한 색상에서 오고 네 번째 값은 0부터 1까지의 불투명도입니다.
em·rem 단위나 프리셋도 쓸 수 있나요?
네. 단위에서 px, em, rem 중 하나를 고르면 모든 그림자의 길이가 그 단위로 쓰이고, 바꿀 때는 브라우저 기본 글자 크기로 환산해 그림자 크기가 그대로 유지됩니다. 프리셋 줄에는 대부분 여러 겹으로 쌓은 완성 효과가 있고, 프리셋 되돌리기를 누르면 그 전의 그림자가 돌아옵니다.
슬라이더를 넘는 값을 직접 입력하거나, CSS를 붙여 넣거나, Tailwind로 받을 수 있나요?
네. 슬라이더마다 옆에 숫자 칸이 있어 슬라이더 끝을 넘는 값도 입력할 수 있으므로 깊은 입체 돌출이나 넓은 빛번짐도 만들 수 있습니다. CSS 직접 고치기를 열면 지금 선언이 텍스트 상자에 들어 있고, 고치거나 다른 text-shadow를 붙여 넣은 뒤 적용을 누르면 그림자로 다시 읽어 들입니다. CSS 아래에는 같은 그림자를 Tailwind 클래스로 적어 두었고 Tailwind 클래스 복사 버튼으로 복사할 수 있습니다.
그림자를 추천받거나, 색을 rgb()나 이름으로 넣을 수 있나요?
네. 프리셋 줄 끝의 무작위 버튼은 잘 보이는 그림자 몇 겹 — 작은 오프셋, 약간의 흐림, 선명한 색 — 을 새로 만들어 주고, 프리셋처럼 덮어쓴 그림자는 프리셋 되돌리기로 되살릴 수 있습니다. 색상 선택기 옆 ‘그림자 색상 직접 입력’ 칸은 hex(짧은 형식과 긴 형식), rgb(), hsl(), CSS 색 이름을 읽고, 색에 투명도가 들어 있을 때만 불투명도를 바꾸며, 읽을 수 없는 값이면 그렇다고 알려 줍니다. 그 아래 빠른 색 줄(회색, 그다음 선명한 색)은 선택한 그림자의 색을 한 번에 바꿉니다.