🚀 CSS Content-Visibility Generator
Updated: 2026-07-11
⚙️ Settings
👁️ Live Preview
Scroll down to see lazy rendering in action with content-visibility: auto
📋 CSS Code
.lazy-section {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
📖 Property Values
| Value | Description | Performance |
|---|---|---|
| visible | Element renders normally | No optimization |
| auto | Off-screen elements skip rendering, render when entering viewport | 🎯 Significant first-load improvement |
| hidden | Element hidden, skips rendering (like display:none but state retained) | Zero rendering cost |