CSS Content Visibility Generator

Skip rendering offscreen content for better performance

content-visibility: auto
Browser skips rendering for offscreen elements. Renders on-demand when scrolled into view.
High performance gain
content-visibility: hidden
Content is never rendered regardless of visibility. Like display:none but preserves rendering state.
High performance gain
content-visibility: visible
Default. Content renders normally with no optimization applied.
No performance gain

Contain Intrinsic Size

When using content-visibility: auto, set contain-intrinsic-size to prevent layout shifts when offscreen elements are skipped.

Generated CSS