랩
이미지 합성기
CSS Filter · Mix Blend Mode · Gradient Overlay · Text Layer를 한 화면에서 조합하고, 결과 CSS를 한 줄로 export. 설정은 URL에 자동 저장돼 그대로 공유돼요.
BLEND
CSS Filter
0px
100%
100%
100%
0%
0%
0%
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;
}