CSS Emboss Text Generator

이 도구는 무엇인가요?

이 도구는 밝은 색과 어두운 색의 text-shadow를 서로 반대 방향으로 오프셋하여 결합해, 텍스트가 튀어나온(양각) 또는 파인(음각) 것처럼 보이는 착시를 만듭니다.

Embossed와 Engraved 스타일을 전환하고, 강도 슬라이더로 3D 효과가 얼마나 강하게 보일지 조절할 수 있습니다.

텍스트를 입력하거나 설정을 조절할 때마다 실시간 미리보기가 즉시 업데이트되어, CSS를 복사하기 전에 효과를 세밀하게 조정할 수 있습니다.

왜 사용해야 할까요?

• 빈티지 감성 브랜드 랜딩 페이지를 만드는데 클라이언트가 로고 텍스트를 "금속에 양각으로 찍힌 것처럼" 보이게 해달라고 요청했을 때 — Embossed 스타일을 고르고 강도를 조절한 뒤 CSS를 히어로 섹션에 바로 붙여넣으세요.
• 복고풍 스큐어모픽 스타일의 매장 결제 앱 UI를 개발 중인데 총 결제 금액이 금속 패널에 새겨진 것처럼 보여야 할 때 — 별도 이미지 없이 Engraved 스타일 하나로 그 효과를 만들 수 있습니다.
• 소규모 마켓플레이스용 "인증 판매자" 배지를 만드는데 포토샵을 열지 않고도 고급스러운 텍스트가 필요할 때 — 여기서 생성하고 금색으로 조정한 뒤 React 컴포넌트에 CSS를 붙여넣으세요.
• 게임 길드 웹사이트 프리랜스 작업을 맡았는데 판타지풍으로 제목이 돌에 새겨진 것처럼 보여야 할 때 — 어두운 회색과 Engraved 스타일을 조합해보면 딱 맞는 효과를 얻을 수 있습니다.
• 개인 포트폴리오 디자인 실험을 하면서 이미지나 외부 라이브러리 없이 순수 CSS만으로 효과를 만드는 실력을 보여주고 싶을 때 — 이 도구가 만드는 간결한 코드는 GitHub README에서 바로 설명하기 좋습니다.
• 내일 아침까지 수정본을 넘겨야 하는데 클라이언트가 방금 CTA 버튼을 "너무 평평하지 않게 살짝 도드라지게" 해달라고 요청했을 때 — 피그마를 다시 열기보다 여기서 바로 생성해서 기존 버튼에 CSS를 붙여넣으세요.

사용 방법

1. 스타일을 적용하고 싶은 텍스트를 입력하세요.
2. 스타일 선택기에서 Embossed(양각) 또는 Engraved(음각)를 선택하세요.
3. 강도 슬라이더를 조절하고 디자인에 맞는 배경색과 텍스트 색상을 선택하세요.
4. "Copy"를 클릭해 생성된 CSS 코드를 복사한 다음 스타일시트에 붙여넣으세요.

예시

입력

텍스트: "Embossed", 스타일: Embossed, 강도: 2

결과

color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);

생성된 CSS는 텍스트 색상, 배경색, 그리고 양각 또는 음각 효과를 만드는 2겹의 text-shadow를 설정합니다.

효과의 작동 방식

양각 및 음각 효과는 명암이 반대인 두 개의 오프셋된 text-shadow 레이어로 만들어집니다.

관련 도구

더 많은 CSS 생성기를 이용해 보세요.

→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator

Embossed와 Engraved, 언제 어느 쪽을 써야 할까

Embossed는 상품 카드 제목, 업적 배지, 포장지에 찍힌 것처럼 보이고 싶은 로고처럼 표면에서 "솟아오른" 느낌을 주고 싶은 요소에 적합합니다. 평범한 텍스트보다 더 눈에 띄고 시선을 끄는 인상을 줍니다.

Engraved는 스큐어모픽 UI의 금속 패널 라벨, 멤버십 카드의 일련번호, 돌과 철을 테마로 한 게임 제목처럼 표면에 "파묻힌" 느낌을 주고 싶은 요소에 더 잘 맞습니다. Embossed보다 더 차분하고 격식 있는 인상을 줍니다.

두 스타일 모두 텍스트 색상을 배경색과 너무 다르게 설정하지 마세요. 텍스트와 배경의 대비가 너무 강하면 그림자의 3D 효과가 잘 보이지 않게 되는데, 눈이 그림자의 명암 그러데이션보다 색상 대비에 먼저 집중하기 때문입니다.

자주 묻는 질문