이미지 위 문구나 색 막을 mix-blend-mode로 맞춰 미리보고 붙일 CSS를 바로 복사해 보세요.
💡 미리보기
* 문구 모드에는 부모·이미지·(선택) 어두운 막·글자 스타일이, 색 막 모드에는 isolation과 오버레이 레이어가 들어 있습니다. 이미지 경로만 바꾸면 됩니다.
💡 텍스트 오버레이로 이미지 위에 글자 얹기
배너·히어로 섹션에서는 사진 위에 제목이나 슬로건을 올리는 일이 많습니다. 그냥 흰 글자만 올리면 밝은 사진에서 잘 안 보이고, mix-blend-mode만 쓰면 분위기 있는 대신 읽기 어려울 때도 있습니다. 이 도구는 문구·합성 방식·글자색·크기와, 실무에서 자주 쓰는 어두운 막을 함께 맞춰 미리보고 CSS를 복사할 수 있습니다.
글자 대신 브랜드 색·그라데이션만 사진 전체에 올리고 싶을 때는 「색·그라데이션 막」을 고르면 됩니다. 투명도와 multiply·screen 등으로 틴트·무드를 맞출 때 씁니다.
mix-blend-mode는 위 레이어와 배경 픽셀을 어떻게 섞을지 정합니다. 부모는 position: relative, 문구·색 막은 absolute로 올려 두는 형태가 기본입니다.
📊 합성 방식 고르는 감
| 방식 | 느낌 | 이럴 때 |
|---|---|---|
| normal | 그냥 겹침 | 막(스크림)으로 가독성 확보할 때 |
| multiply | 어둡게 스며듦 | 밝은 사진 위 진한 톤·틴트 |
| screen | 밝게 비침 | 어두운 사진 위 밝은 글자·막 |
| overlay / soft-light / hard-light | 대비·부드럽게·강하게 | 히어로 타이틀·색 막에 자주 |
| color | 밝기는 두고 색만 | 단색 톤 변환에 가깝게 |
| difference | 색이 반전됨 | 실험·강조용 (본문엔 비추천) |
📌 어두운 막이 더 자주 쓰이는 이유
텍스트 오버레이에서 가독성이 최우선이면, 이미지 위에 반투명 검정 그라데이션(스크림)을 깔고 그 위에 글자를 올리는 패턴이 많습니다. 블렌드는 분위기를 살릴 때 곁들이고, 막 + normal 조합만으로도 충분한 경우가 많습니다. 이 생성기 기본값도 그 흐름을 따릅니다.
색 막 모드에서는 부모에 isolation: isolate를 두면 블렌드가 바깥 배경까지 번지지 않게 막을 수 있습니다. 카드·섹션 안에서만 섞이게 하고 싶을 때 확인하세요.
미리보기 이미지는 사이트에 올려 둔 예시입니다. 실제 배너 이미지로 바꿔 보려면 복사 코드의 이미지 경로만 교체하면 됩니다. 가로로 긴 히어로와 정사각 카드는 비율이 다르니, 부모에 aspect-ratio나 고정 높이를 맞춰 두는 것이 좋습니다.
⚙️ 복사 후 확인할 것
긴 한글 문구는 줄바꿈·자간이 달라 보일 수 있으니 미리보기에서 길이를 맞춰 보세요. 비디오 위에도 같은 구조로 올릴 수 있지만, 움직이는 배경에서는 블렌드보다 막 + 단색 글자가 안전한 편입니다.
접근성 측면에서 중요한 정보는 이미지에만 의존하지 말고, 대체 텍스트·본문에도 남기는 편이 좋습니다. 글자 대비가 약하면 막 농도를 높이거나 글자색을 바꿔 보세요.
글자 크기는 rem 기준이라, 사이트 루트 폰트 크기에 따라 실제 픽셀이 달라집니다. 모바일에서는 미리보기보다 작게 보이도록 미디어쿼리로 font-size만 한 단계 낮추는 경우도 많습니다. 텍스트 오버레이는 카드 썸네일·프로모션 배너에도 같은 구조로 쓸 수 있습니다.
합성만으로 대비가 안 나오면 막 농도를 높이거나, 블렌드를 normal로 두고 글자색·그림자로 맞추는 편이 빠를 때가 있습니다. 그라데이션 색 막은 제목이 있는 쪽만 어둡게 두고 나머지 사진은 살리는 식으로 맞춰 보세요.
🚨 이용 시 주의사항
difference는 눈에 띄지만 읽기 힘든 경우가 많습니다. 본문·CTA에는 overlay·multiply나 막+normal을 먼저 검토하세요. 이 도구는 filter(blur·brightness 등)를 만들지 않습니다. 사파리·크롬에서 합성 톤이 미세하게 다를 수 있어, 배포 전 한 번씩 확인하는 것이 좋습니다.
