blob mask organic layered image accent shape hero section image decoration about section profile image feature image accent treatment rectangular images feel boring need organic image shape without SVG masks want colored accent layer behind image
Mask Blob Layered
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/mask-blob-layered.json Preview
Background
Customize
Quick Start
<div class="mask-blob-layered"><img src="..." alt="..."></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 495 bytes · 25 lines
- Custom Properties
-
--blob-accent - Classes
-
.mask-blob-layered
blob mask organic layered image accent shape
A two-layer blob effect: a ::before pseudo-element creates a colored organic shape behind the image, while the image itself gets a different organic border-radius. The color “peeks out” around the edges creating depth.
Profile image with accent blob
<div class="mask-blob-layered">
<img src="portrait.jpg" alt="Team member" class="h-64 w-64">
</div>Custom accent color
<div class="mask-blob-layered" style="--blob-accent: oklch(0.6 0.2 250)">
<img src="portrait.jpg" alt="Profile" class="h-48 w-48">
</div>