Softonic

CSS 텍스트 그림자 생성기

단계 1 / 2
CSS 생성

DevTools에서 text-shadow 선언을 수동으로 생성하는 것은 가능하지만, 영웅 헤딩에 부드러운 뉴모픽 빛 효과, 레트로 스타일의 이중 층 드롭 그림자, 또는 선명한 1px 선명도의 윤곽선을 적용해야 할 때는 거의 추측에 의존할 수밖에 없습니다. 이 생성기는 X 오프셋, Y 오프셋, 흐림 반경 및 RGBA 색상을 조정할 수 있게 해주며, 바로 붙여넣을 수 있는 CSS 코드를 복사할 수 있습니다.

텍스트 그림자를 어떻게 생성할까

  1. 1

    오프셋을 설정하세요

    X는 픽셀 단위의 수평 이동량을 나타내며, Y는 수직 이동량을 의미합니다. 양의 Y 값은 그림자 위치를 아래로 밀어내고, 음의 Y 값은 위로 밀어냅니다.

  2. 2

    부드러운 반경을 선택하세요

    블러 값 0은 단단한 실루엣을 생성하며, 값이 높아질수록 그림자가 점차 희미해집니다. 일반적인 부드러운 효과에는 4~12px의 블러가 사용됩니다.

  3. 3

    색상을 선택하세요

    불투명도를 조절하려면 RGBA 문자열을 사용하세요. `rgba(0,0,0,0.35)`는 밝은 배경에서 미묘한 깊이 효과를 구현하는 데 적합한 안전한 기본값입니다.

  4. 4

    선언문을 복사하세요

    이 도구는 `text-shadow: Xpx Ypx Blurpx color;`를 출력하므로, 스타일시트의 일치하는 선택자에 그 값을 입력하세요.

실제로 잘 보이는 텍스트 그림자 레시피들

텍스트 그림자는 네 개의 숫자와 하나의 색상이 결합된 값입니다. 이를 기억하면 잡지나 랜딩 페이지에서 거의 모든 효과를 재현할 수 있습니다.

치트 시트

효과 선언문
미묘한 깊이 text-shadow: 0 1px 2px rgba(0,0,0,0.25);
소프트 드롭 text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1px 외곽선 text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
레트로 이중 text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
네온 광선 text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

여러 그림자를 겹쳐 쌓기

text-shadow는 쉼표로 구분된 목록을 지원합니다. 브라우저는 화가 알고리즘에 따라 소스 순서대로 그리므로, 목록의 마지막 그림자가 가장 뒤쪽에 놓입니다. 이를 활용하면 상하좌우 네 방향에 각각 1px짜리 선명한 그림자를 배치해 윤곽선을 흉내 내거나, 선명한 근거리 그림자와 퍼진 원거리 그림자를 겹쳐 깊이감을 만들 수 있습니다.

텍스트 그림자를 쓰지 않는 편이 나을 때

  • 아주 작은 본문 텍스트에서는 2px를 넘는 흐림을 주면 글리프가 뭉개져 보입니다. -webkit-font-smoothing과 더 강한 대비를 우선하세요.
  • 성능이 중요한 히어로 애니메이션에서는 그림자를 세 개 넘게 겹치지 마세요. 레이어가 하나 늘 때마다 브라우저가 텍스트를 다시 래스터화해야 합니다.
  • 복잡한 경로(곡선, 회전 등)에 그림자를 바짝 붙여야 한다면, SVG의 <filter>와 feDropShadow 사용을 고려해 보세요. 글리프의 윤곽을 더 정확하게 따라갑니다.

자주 묻는 질문

설계상 출력 결과는 단일 그림자 계층으로 구성됩니다. 효과를 여러 계층에 적용하려면 생성기를 여러 번 실행한 후 결과들을 쉼표(,)로 연결하여 사용합니다. 예: text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);

text-shadow는 렌더링된 텍스트의 글리프 윤곽을 따릅니다. box-shadow는 해당 요소의 직사각형 경계 박스를 따릅니다. 두 요소는 유사한 매개변수를 사용하지만 완전히 다른 형태에 대해 라스터화됩니다.

브라우저는 텍스트 그림자를 기기의 픽셀 그리드에 맞춰 래스터화합니다. 블러가 0인 그림자는 2배 해상도 디스플레이에서 서브픽셀 위치에 렌더링되어 다소 흐릿하게 보일 수 있습니다. 블러를 1로 올리면 시각적 무게감을 바꾸지 않으면서도 대개 이 문제가 해결됩니다.

입력한 값은 선언문을 만들기 위해 당사 서버로 전송되지만 저장되거나 재사용되지는 않습니다. 여러 단계로 구성된 화면에서는 링크를 통해 단계 사이를 이동하며, 한 페이지로 된 화면에서는 아무것도 보관되지 않습니다. 페이지를 새로 고치면 모든 값이 사라집니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

이 도구는 다른 언어로도 제공됩니다