Visibility Property
Last updated: 2026-09-13
visibility Visibility Property
The visibility property controls whether an element is visible. Its key difference from display:none is that hidden still occupies layout space; the element is just not rendered visually. The default value, visible, shows the element normally. The property is inherited and is often used for hiding elements while keeping their space.
| Category | |
|---|---|
| Initial Value | visible |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
visibility: visible | hidden | collapse;⚙️ Values
| Value | Type | Description |
|---|---|---|
visible | hidden | collapse | Keyword | Controls whether the element is visible (hidden still occupies space). |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| visibility | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： A visibility:hidden element still occupies space; display:none removes it from the layout entirely.
❓ FAQ
QWhat's the difference between visibility:hidden and display:none?
Avisibility:hidden makes an element invisible while keeping its original space in the layout; it stays in the document flow and is still read by screen readers. display:none removes the element from the flow entirely, taking no space and hiding it from screen readers. Use visibility:hidden to hide while preserving space, for example while measuring a layout or waiting for content, and display:none to remove an element completely.
QWhat's the difference between visibility:hidden and opacity:0?
ABoth hide an element visually while keeping its space, but opacity:0 still allows clicks and events and supports smooth transitions, whereas visibility:hidden stops responding to mouse events, so clicks pass through, and it has limited transition support. opacity also creates a new stacking context, while visibility does not affect children's layout, and children can be restored individually with visibility:visible. Pick opacity for fades, visibility for true interaction removal.
QIs visibility inherited?
AYes. visibility is one of the few inherited CSS properties: when a parent is set to hidden, its children are hidden by default, but a child can force itself visible with visibility:visible. This is handy for submenus and expandable panels, where you hide the parent container and then reveal children on hover without touching the parent's own styling, keeping the implementation simple and self-contained.
QCan visibility be transitioned?
Avisibility is a discrete property, so transitions usually snap rather than fade. A common trick is to transition it together with opacity: fade opacity from 0 to 1 while switching visibility at the end of the animation. This produces clean fade-in and fade-out effects and is frequently used for modals, tooltips, and similar show-hide animations, giving the same polish as opacity-only transitions while keeping the element non-interactive while hidden.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
display Property
Control whether an element is displayed and its display type.
opacity Property
Control an element's transparency.
