The right way to hide an element in CSS depends on what “hidden” should mean: should it stop taking up space, remain accessible to screen readers, stay keyboard-focusable, or animate back into view? For most closed panels and inactive UI, use display: none or the HTML hidden attribute. Use visibility: hidden to preserve layout space, and reserve opacity, transforms, clipping, and off-screen positioning for cases where their interaction and accessibility behavior is managed deliberately.
Choose a hiding method by its effect
CSS can hide an element visually without removing it from the document or changing what assistive technology can access. Before choosing a technique, decide what should happen to the element’s layout space, accessibility-tree exposure, keyboard focus, pointer interaction, animation, and DOM state.
| Method | Layout space | Painted on screen | Assistive technology | Focus and pointer considerations | Transition and state |
|---|---|---|---|---|---|
display: none |
No | No | Normally removed from the accessibility tree | Hidden descendants are not focusable or available for normal navigation | Not directly animatable; the DOM node and its state remain |
visibility: hidden |
Yes | No | Normally removed from the accessibility tree | Hidden descendants are not focusable | Can be used in visibility transitions; the DOM node and its state remain |
opacity: 0 |
Yes | Transparent | Opacity alone does not hide it from the accessibility tree | May remain focusable and clickable | Animatable; the DOM node and its state remain |
| Off-screen positioning | Usually removed from normal flow when absolutely positioned | Outside the viewport | May remain exposed | Focusable controls can cause keyboard and screen-reader problems | Position can be changed; the DOM node and its state remain |
clip-path clipping |
Usually yes | Clipped portion is not visible | May remain exposed | Manage focus and interaction if descendants are interactive | Can be animated; the DOM node and its state remain |
| Zero dimensions and overflow clipping | The box has no dimensions | Effectively invisible | May remain exposed | Check whether descendants can receive focus or pointer input | The DOM node and its state remain |
transform: scale(0) |
Yes | Scaled to zero | May remain exposed | Does not automatically prevent focus or interaction | Animatable; the DOM node and its state remain |
| Negative text indentation | Usually yes | Text moved outside the visible area | May remain exposed | Legacy technique; ensure any interactive content is usable | Text and DOM state remain |
content-visibility: hidden |
Rendering is suppressed; do not assume it removes space in every use | No rendering of the content | Do not assume it hides content from assistive technology | Manage focus and accessibility state separately | Rendering can be suppressed while the DOM node and state remain |
HTML hidden attribute |
Normally no | Normally not rendered | Hidden content is not presented as relevant | Do not override its hidden state while leaving controls operable | The DOM node and its state remain |
These are practical defaults, not substitutes for testing the component in its actual interaction model. MDN explains that display: none removes an element from the accessibility tree, while aria-hidden affects exposure to an accessibility API rather than visual rendering: MDN on display: none and MDN on aria-hidden.
Methods that remove an element from normal presentation
1. Use display: none when the element should take no space
Apply this to closed panels, inactive tab panels, or responsive UI that should not participate in layout while hidden.
#1 Best Overall
.is-hidden {
display: none;
}The element stays in the DOM, so scripts can still find it and its state can persist, but it is not rendered and is normally removed from the accessibility tree. One exception MDN notes: content referenced by a visible element’s aria-describedby or aria-labelledby may still be exposed. For an interactive panel, ensure its hidden state and any controlling button’s expanded state stay synchronized.
2. Use the HTML hidden attribute for semantically inactive content
The hidden attribute is a clear way to mark content as currently irrelevant:
<section hidden>
<h2>Account details</h2>
<p>Additional account information.</p>
</section>Browsers normally style hidden content as non-rendering. A project rule that overrides the user-agent style can defeat the visual result, so do not apply CSS that makes a hidden section visible while leaving it in a hidden state. The W3C Design System also describes display: none as a way to remove items completely from presentation: W3C Design System: Hiding content.
Methods that hide content but preserve layout or support effects
3. Use visibility: hidden to reserve the element’s space
This hides the element’s rendering while keeping its layout slot, which can prevent nearby content from shifting when visibility changes:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #2
.is-invisible {
visibility: hidden;
}In ordinary cases the hidden element and its descendants are removed from the accessibility tree, and hidden interactive descendants cannot receive focus. Because the layout space remains, this is useful when preserving geometry matters more than reclaiming space. The W3C Design System highlights it for cases where the visibility change should be transitioned.
4. Use opacity: 0 for a fade only when interaction is handled too
Opacity makes an element transparent, not semantically or interactively absent:
.is-transparent {
opacity: 0;
}This can be animated smoothly, but the transparent element may still occupy space, appear in the accessibility tree, receive keyboard focus, or intercept pointer input. When hiding a control or panel, pair the visual effect with appropriate focus, pointer, and accessibility-state management rather than assuming transparency disables it.
5. Use transform: scale(0) for animated collapse effects
Scaling an element to zero can provide an animation-friendly visual collapse:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →.collapsed {
transform: scale(0);
transform-origin: top left;
}The transform does not automatically remove the element’s original layout space or prevent focus, hit testing, or assistive-technology exposure. Use it as a visual effect alongside a deliberate interaction state, not as the only mechanism for disabling a hidden panel.
Methods for visually hidden content
6. Move content off-screen only with a focus strategy
Absolute positioning can put a box outside the viewport while leaving its DOM node available:
.visually-offscreen {
position: absolute;
left: -10000px;
}This is not a safe general-purpose way to hide interactive UI. A keyboard user may focus a control that remains far outside the visible area. If a component intentionally uses off-screen content, define what happens when it receives focus and test keyboard and screen-reader behavior.
7. Clip content with clip-path
An inset clip can make an element’s visible area effectively disappear:
.clipped {
clip-path: inset(50%);
}Clipping changes what is painted; it does not by itself guarantee removal from layout, focus order, or the accessibility tree. It is suitable for visually hidden content only when those remaining behaviors are intentional.
8. Use zero dimensions and overflow clipping sparingly
A zero-sized box with overflow hidden is another way to suppress visible output:
.zero-box {
width: 0;
height: 0;
overflow: hidden;
}Descendants may still exist in the DOM and can require focus and accessibility handling. Do not apply this pattern to a panel with controls unless its focus behavior has been addressed.
9. Avoid negative text indentation for new implementations
This older image-replacement pattern pushes text beyond the visible area:
Free tools Windows power users keep installed
One-click scans. No signup required.
.icon-label {
text-indent: -9999px;
overflow: hidden;
}It can create responsive and focus-indicator problems, and it is less clear to maintain than a documented visually-hidden utility. Use it only when maintaining a legacy pattern whose behavior is understood.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Rendering suppression is not the same as accessibility hiding
10. Use content-visibility: hidden for rendering control, not as an accessibility shortcut
This property suppresses rendering of content:
.deferred {
content-visibility: hidden;
}MDN cautions that rendering and accessibility-tree behavior are separate concerns. If the content must also be hidden from assistive technology, manage that state explicitly and keep it synchronized with the visual state; do not assume this property is equivalent to display: none. See MDN: content-visibility.
Use aria-hidden="true" only to hide from accessibility APIs
aria-hidden="true" does not hide an element visually. It indicates that the element and its descendants should not be exposed through accessibility APIs, so it is appropriate for a purely presentational duplicate, not for content that users of assistive technology need. MDN warns not to place it on a focusable element or an ancestor of focusable content: MDN: aria-hidden.
How to hide interactive content safely
For a closed panel, the safest default is to remove it from presentation and interaction together, usually with hidden or display: none. If an effect requires a visual-only method such as opacity, clipping, or transforms, explicitly handle focus and pointer interaction and ensure assistive technology receives the right state.
- When a panel closes, move focus to a sensible control if focus was inside it.
- Do not leave keyboard-focusable descendants in visually hidden content unless that is an intentional part of the component’s interaction model.
- Keep visual visibility, the HTML hidden state, and relevant accessibility states synchronized as the component opens and closes.
- Test with keyboard navigation and the screen reader/browser combinations your users rely on.
W3C guidance notes that interactive elements hidden with display: none or visibility: hidden are not focusable and are removed from the accessibility tree: W3C ACT Rule 6cfa84.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
