랩

이미지 합성기

CSS Filter · Mix Blend Mode · Gradient Overlay · Text Layer를 한 화면에서 조합하고, 결과 CSS를 한 줄로 export. 설정은 URL에 자동 저장돼 그대로 공유돼요.

BLEND

CSS Filter

Blur

0px

Brightness

100%

Contrast

100%

Saturate

100%

Grayscale

Sepia

Invert

Hue Rotate

0°

Filter는 베이스 이미지에만 적용. Gradient·Text 레이어에는 영향 없음.

CSS

.composite {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
}

.composite__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composite__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ffffff;
  font-size: 112px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  mix-blend-mode: difference;
  pointer-events: none;
}

HTML

<div class="composite">
  <img class="composite__image" src="https://picsum.photos/id/1015/1200/900" alt="" />
  <div class="composite__text">
    <span>BLEND</span>
  </div>
</div>

.composite {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
}

.composite__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composite__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ffffff;
  font-size: 112px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  mix-blend-mode: difference;
  pointer-events: none;
}