CSS Text Shadow 생성기 무료 온라인: 텍스트 그림자 시각적 생성

A text-shadow: X Y blur color. X, Y는 오프셋, blur는 확산, color는 그림자 색상.

A CSS에서는 쉼표로 구분하여 가능. 이 도구는 개별 그림자 생성.

A 깊이감 있는 제목, 이미지 위 가독성, 네온 효과, 레트로 스타일.

A 아니요, 그렇지 않습니다. 이 생성기는 표준 CSS `text-shadow` 속성을 생성합니다. 이러한 속성은 벡터 기반이며 텍스트와 함께 확장됩니다. 고 DPI 디스플레이에서는 선명한 그림자를, 다른 곳에서는 일반 그림자를 얻게 됩니다. 기본 글꼴 크기가 적절하게 설정되었는지 확인하기만 하면 됩니다.

A 네, 매우 중요합니다. CSS는 text-shadow 값을 X 오프셋, Y 오프셋, 흐림 반경, 색상 순서로 엄격하게 읽습니다. 순서를 섞으면 그림자가 깨지거나 예상치 못한 동작을 합니다. 예를 들어 '2px 2px 4px #000'은 잘 작동하지만 '2px 4px #000 2px'는 의도대로 렌더링되지 않습니다. 이 생성기가 자동으로 순서를 유지하므로 코드를 복사해서 바로 사용할 수 있습니다.

A 네, 하나의 요소에 5개 이상 그림자를 쌓으면 특히 모바일에서 페이지 렌더링이 느려집니다. 그림자 하나마다 브라우저가 계산해야 할 레이어가 늘어나거든요. 3px 블러가 있는 그림자 하나는 괜찮습니다. 장식용 텍스트라면 그림자를 최대 2~3개로 제한하세요. 버벅임이 느껴지면 블러 반경을 줄이거나 그림자 하나를 빼보세요. 이 도구의 미리보기에서 실시간으로 확인할 수 있습니다.

A 아니요, 직접적인 영향은 없습니다. 블러 반경은 그림자 가장자리의 부드러움만 제어합니다. 0px 블러는 도장처럼 날카로운 가장자리를 만듭니다. 10px로 설정하면 색상이 퍼져서 더 밝아 보이지만, 실제 hex 또는 rgba 값은 완전히 동일하게 유지됩니다. 더 깊은 그림자를 원한다면 블러를 줄이는 대신 색상 불투명도를 높이세요. 블러 5px에 검정 50%를 섞으면 균형 잡힌 결과를 얻을 수 있습니다.

A text-shadow 속성 하나로는 직접 안 됩니다. CSS 그림자는 텍스트 전체 형태를 감쌉니다. 하지만 흉내낼 순 있어요. Y 오프셋을 3~4px, 흐림을 1px로 설정하고, 어두운 색상을 70% 불투명도로 쓰세요. 그러면 날카로운 그림자가 아래로 직선으로 떨어져 밑줄처럼 보입니다. 진짜 한쪽 효과를 원한다면 border-bottom이나 가상 요소를 사용하는 게 낫습니다.