References

Beginner-friendly references for web development, with live, editable examples.

The CSS visibility property

Property CSS All modern browsers Updated
Quick answer

The CSS visibility property hides or shows an element. visibility: hidden makes it invisible but keeps its space in the layout — unlike display: none, which removes the box completely. A hidden element is also taken out of the tab order and hidden from screen readers.

Overview

visibility toggles whether an element is shown, but with a twist that sets it apart from its cousins. visibility: hidden makes the element disappear visually while leaving the gap it occupied intact. The layout does not reflow — there is simply an empty space where the element was.

That is the key difference from display: none, which removes the box entirely so everything else closes up around it. Choose visibility when you want to hide something without the page shifting — toggling a placeholder, or hiding one item in a grid without rearranging the rest. Choose display: none when the space should collapse too.

It is also distinct from opacity: 0: an opacity-zero element is invisible but still fully interactive — clickable and focusable — whereas a visibility: hidden element is removed from the tab order and from assistive technology. There is even a niche value, collapse, for hiding table rows and columns the way display: none would.

Syntax

selector {
  visibility: hidden;
}

Values

The visibility property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
visible The element is shown. The default.
hidden The element is invisible but still takes up its space in the layout.
collapse For table rows and columns, removes them like display: none; elsewhere behaves like hidden.

Example

Live example 
<style>
  .row { display: flex; gap: 10px; font: 600 13px system-ui, sans-serif; }
  .row div { background: #1c7ce9; color: #fff; padding: 16px; border-radius: 8px; }
  .gone { visibility: hidden; }
</style>
<div class="row">
  <div>One</div>
  <div class="gone">Two (hidden, space kept)</div>
  <div>Three</div>
</div>

Best practices

  • Use visibility: hidden when you want to hide an element but keep its space, so the layout does not jump.
  • Use display: none instead when the space should collapse and the element should leave the flow.
  • Do not rely on opacity: 0 to hide interactive content — unlike visibility: hidden, it stays clickable and focusable.
  • Because visibility can be transitioned, you can fade something out and then set it to hidden, combining a smooth animation with a proper hide.

Accessibility

Like display: none, an element with visibility: hidden is removed from the accessibility tree — screen readers skip it and it leaves the tab order. That is exactly right for content that is genuinely hidden, and exactly wrong for content that should still be announced.

If you want something visually hidden but still read out — a label for a screen reader, say — do not use visibility: hidden or display: none. Use a dedicated visually-hidden utility (clipping the element to a 1px box) so it stays in the accessibility tree while disappearing from view.

Frequently asked questions

What is the difference between visibility: hidden and display: none?
visibility: hidden hides the element but keeps its space, so the layout stays put. display: none removes the box entirely and the surrounding content closes up.
Does visibility: hidden remove the element from the page?
Not from the layout — its space is preserved. But it is removed from the tab order and hidden from screen readers, so it is gone for interaction and assistive technology.
What is the difference between visibility: hidden and opacity: 0?
Both hide the element visually and keep its space, but opacity: 0 leaves it clickable and focusable, while visibility: hidden takes it out of interaction entirely.
Can I animate visibility?
It only flips between states, so it does not tween, but it can be delayed in a transition. A common trick is to fade opacity while delaying visibility so the element stays focusable until the fade ends.
vertical-align white-space