실시간 미리보기 CSS text-shadow 생성기

이 text-shadow 생성기가 하는 일

가로 오프셋, 세로 오프셋, 흐림 반경 슬라이더를 움직이고 그림자 색상을 고른 뒤 불투명도를 설정하면, 이 도구가 유효한 CSS text-shadow 값을 실시간으로 만들어 줍니다. 코드 위의 샘플 텍스트가 즉시 갱신되어 확정하기 전에 그림자가 어떻게 드리우는지 정확히 확인할 수 있고, 한 번 클릭하면 스타일시트에 바로 붙여넣을 수 있는 text-shadow: …; 선언문 전체가 복사됩니다. 모든 값이 단순하고 예측 가능한 범위로 조절되므로 부드러운 드롭 섀도, 또렷한 오프셋, 은은한 글로를 몇 초 만에 맞출 수 있습니다.

그림자 값이 만들어지는 방법

CSS text-shadow는 offset-x offset-y blur-radius color 형식으로 작성됩니다. 이 도구는 두 오프셋과 흐림 값을 픽셀 단위로 받아 선택한 색상과 이어 붙입니다. 색상은 rgba()로 표현되며, hex 색상의 빨강·초록·파랑 채널과 불투명도 슬라이더를 결합해 색조를 바꾸지 않고도 그림자를 흐리게 만들 수 있습니다. 양수 X는 그림자를 오른쪽으로, 양수 Y는 아래쪽으로 밀며 음수 값은 반대 방향으로 이동시키고, 흐림 값이 클수록 가장자리가 부드러워집니다. 출력은 결정적이라 같은 슬라이더 위치는 항상 같은 코드를 만듭니다.