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로 올리면 시각적 무게감을 바꾸지 않으면서도 대개 이 문제가 해결됩니다.

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

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

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