CSS content-visibility Generator
Generate CSS with content-visibility property for better rendering performance
Settings
Generated CSS
.element {
content-visibility: auto;
contain-intrinsic-size: 300px 200px;
}About content-visibility
visible
Default value. Element renders normally with no special containment.
hidden
Element skips rendering. Similar to display: none but maintains layout state. Content is not accessible or searchable.
auto
Browser skips rendering if element is off-screen. Great for long lists and virtualization. Most useful for performance optimization.
contain-intrinsic-size
Specifies the natural size of the element when content-visibility: auto is applied and content is not rendered. Prevents layout shifts.
Performance Benefits
- Reduces initial rendering time
- Skips layout, paint, and style for off-screen content
- Improves Core Web Vitals (LCP, FID)
- Ideal for infinite scroll and long pages
Browser Support
Supported in modern browsers (Chrome 85+, Edge 85+, Opera 71+). Check compatibility for production use.