A fade in scroll reveal tile built with pure HTML and CSS that brings content tiles into view using a gradual opacity transition as they enter the viewport, creating a clean and elegant reveal effect without relying on JavaScript or external libraries.
Usage
This component is ideal for layouts where individual items should appear gently and independently, such as card grids, image galleries, product listings, or feature blocks where each tile benefits from a soft entrance rather than stacked or layered motion.
Implementation
The reveal behavior is achieved using CSS opacity changes, transition timing, and viewport-based state styling, allowing each tile to fade from transparent to visible when it becomes active while keeping the structure lightweight and reusable.
HTML
<div class="scroll-tile">
<p>Revealed on scroll</p>
</div>CSS
.scroll-tile {
width: 200px;
padding: 1rem;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
opacity: 0;
transform: translateY(12px);
animation: reveal 1.2s ease forwards;
}
@keyframes reveal {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-color-scheme: dark) {
.scroll-tile {
background: #1f2933;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses simple fade in visibility changes
- Keeps tile layout stable during reveal
- Suitable for grid and card-based designs
- Designed for calm, minimal animations
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.