CSS visibility Property

The visibility property controls whether an element is rendered (painted) and whether it participates in hit‑testing and visual output, while allowing you to preserve or remove its layout footprint depending on the chosen mode. Unlike display, which changes whether an element occupies space in the document flow, visibility lets you separate visual presence from layout - e.g., you can prevent an element from being drawn while still reserving the space it would have taken. This distinction is important when you want to keep surrounding content from reflowing but temporarily hide or reveal parts of the UI.

Because visibility affects painting and hit-testing, it interacts differently with interaction- and animation-related properties. An element that is not painted typically will not receive pointer events; for fine-grained control over whether an element receives mouse or touch input you can use pointer-events. For transitions and gradual effects, note that full on/off visibility changes are discrete; to create smooth fades you typically combine visibility changes with opacity or use transition rules to coordinate the change, toggling visibility at the start or end of an opacity animation so the element is removed from or returned to the painted tree at the appropriate moment.

visibility is inherited, so setting it on an ancestor can suppress or alter the rendering of many descendants without individually changing each of them. That inheritance can be convenient for toggling whole sections of a UI, but it can also lead to surprises if a child needs to remain visible while its parent is not - that requires lifting the child out of the ancestor’s context (for example by changing its layout with position and stacking behavior via z-index) or rethinking the element structure. Finally, be aware that some element types (notably table rows and columns) may be handled specially by browsers when visibility modes interact with table layout, so testing in your target scenarios is advisable.