fade edge gradient overlay section transition blend fade section content into dark background hero image bottom dissolve scrollable list with edge fade indicators content preview with "read more" fade need content to blend into background at edges want smooth section transitions without hard borders need fade overlay at bottom of image or content area
Edge Fade
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/edge-fade.json Preview
Background
Customize
Quick Start
<div class="edge-fade-bottom relative h-96 overflow-hidden">Content here</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 1301 bytes · 66 lines
- Custom Properties
-
--fade-color--fade-height - Classes
-
.edge-fade-bottom.edge-fade-top.edge-fade-both
fade edge gradient overlay section transition blend
Gradient ::after pseudo-element that fades content to a solid color at section edges. Three variants: bottom-only, top-only, and both. Uses color-mix() for a smoother mid-transition than a plain two-stop gradient. Set --fade-color to match the background beneath.
Hero image fade to dark
<div class="edge-fade-bottom relative h-[500px] overflow-hidden" style="--fade-color: oklch(0.1 0 0);">
<img src="/placeholder.svg" alt="" class="h-full w-full object-cover" aria-hidden="true">
<div class="absolute inset-0 flex items-end p-12">
<h1 class="relative z-10 text-4xl font-bold text-white">Title over faded image</h1>
</div>
</div>Scrollable list with both-edge fade
<div class="edge-fade-both relative h-64 overflow-y-auto" style="--fade-color: oklch(0.98 0 0); --fade-height: 3rem;">
<ul class="space-y-2 p-4">
<li>Item 1</li>
<li>Item 2</li>
<!-- more items -->
</ul>
</div>Light background bottom fade
<section class="edge-fade-bottom relative py-24" style="--fade-color: oklch(0.97 0.005 75); --fade-height: 10rem;">
<div class="mx-auto max-w-4xl px-6">
<p>Section content that fades into the background below.</p>
</div>
</section>