CSS visibility Property

What You’ll Learn

The visibility property lets you hide elements visually while keeping their space in the layout — useful when you want zero reflow.

Introduction

The visibility property in CSS is used to control the visibility of an element. Unlike the display property, which removes the element from the document flow, visibility hides an element but still maintains its allocated space on the page.

This can be useful in situations where you want to hide an element without causing layout changes.

Definition and Usage

Apply visibility to any element when you need to toggle appearance while preserving layout structure. Common use cases include placeholder slots, skeleton states, and toggling details panels where reflow would feel jumpy.

📝 Syntax

The syntax for the visibility property is straightforward. It can be applied to any HTML element.

element {
  visibility: visible | hidden | collapse | inherit;
}

Here, the value can be one of several predefined keywords.

Basic Example

.hidden-paragraph {
  visibility: hidden;
}

Syntax Rules

• One keyword value at a time.
• hidden keeps the element’s box in the layout.
• Children can become visible even when a parent is hidden.
• collapse is mainly for table rows, columns, and row/column groups.
• The property is inherited.

Related Properties

• display — removes or changes layout participation (none removes space)
• opacity — fades content but keeps it interactive at values above 0
• content-visibility — skips rendering off-screen content for performance
• aria-hidden — accessibility attribute to hide content from assistive tech

🎯 Default Value

The default value of the visibility property is visible, meaning the element is visible by default.

💎 Property Values

The visibility property accepts keyword values that control whether content is shown.

When to Use visibility

visibility is helpful when hiding should not disturb layout:

• Reserved placeholders — Keep a slot open while content loads or toggles.
• Stable toolbars — Hide labels or icons without shifting neighboring controls.
• Table rows — Use collapse to hide rows and reclaim table space.
• Print styles — Hide decorative elements while preserving document structure.
• Animation handoff — Pair with transitions when fading before removing from layout.

Examples Gallery

In this example, we’ll use the visibility property to hide a paragraph.

<style>
  .hidden-paragraph {
    visibility: hidden;
  }
</style>

<p class="hidden-paragraph">
  This paragraph is hidden but still takes up space.
</p>
<p>This paragraph is visible.</p>

.vis-hidden { visibility: hidden; }
.disp-none { display: none; }

.details { visibility: hidden; }
.card.is-open .details { visibility: visible; }

tr.collapsed {
  visibility: collapse;
}

♿ Accessibility

• Hidden is not enough for screen readers — visibility: hidden hides content visually, but pair with aria-hidden="true" when content should be ignored by assistive technology.
• Manage keyboard focus — Hidden elements may still receive focus. Use tabindex="-1" or move focus when hiding interactive controls.
• Prefer display or inert for true removal — When content should be fully unavailable, display: none or the inert attribute is often safer.
• Do not hide essential instructions — Only hide supplementary UI; critical labels and errors must stay visible or be announced another way.

visibility vs display vs opacity

Choose the tool that matches your layout and interaction needs. These three properties are often confused by beginners.

💡 Best Practices