10 Ways to Hide Elements in CSS

There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.

Animation

Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.

Accessibility

Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true" may be necessary to describe the appropriate action.

Be aware that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences.

Event Handling

Hiding will either stop events being triggered on that element or have no effect. That is, the element is not visible but can still be clicked or receive other user interactions.

Performance

After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three stages:

Layout: generate the geometry and position of each element
Paint: draw out the pixels for each element
Composition: position element layers in the appropriate order

An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.

1. `opacity` and `filter: opacity()`

The opacity: N and filter: opacity(N) properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

See the Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.

There’s little practical difference between the two in modern browsers, although filter should be used if multiple effects are applied at the same time (blur, contrast, grayscale, and so on).

Opacity can be animated and offers great performance, but be aware that a fully transparent element remains on the page and can trigger events.

metric	effect
browser support	good, but IE only supports `opacity` 0 to 1
accessibility	content not read if 0 or 0% is set
layout affected?	no
rendering required	composition
performance	best, can use hardware acceleration
animation frames possible?	yes
events triggered when hidden?	yes

2. `color` Alpha Transparency

opacity affects the whole element, but it’s also possible to set the color, background-color, and border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent.

See the Pen
hide with color alpha by SitePoint (@SitePoint)
on CodePen.

Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using linear-gradient or similar.

The alpha channel can be set with:

transparent: fully transparent (in-between animations are not possible)
rgba(r, g, b, a): red, green, blue, and alpha
hsla(h, s, l, a): hue, saturation, lightness, and alpha
#RRGGBBAA and #RGBA

metric	effect
browser support	good, but IE only supports `transparent` and `rgba`
accessibility	content still read
layout affected?	no
rendering required	painting
performance	good, but not as fast as `opacity`
animation frames possible?	yes
events triggered when hidden?	yes

3. `transform`

The transform property can be used to translate (move), scale, rotate, or skew an element. A scale(0) or translate(-999px, 0px) off-screen will hide the element:

See the Pen
hide with transform: scale(0); by SitePoint (@SitePoint)
on CodePen.

transform offers excellent performance and hardware acceleration because the element is effectively moved into a separate layer and can be animated in 2D or 3D. The original layout space remains as is, but no events will be triggered by a fully hidden element.

metric	effect
browser support	good
accessibility	content still read
layout affected?	no — the original dimensions remain
rendering required	composition
performance	best, can use hardware acceleration
animation frames possible?	yes
events triggered when hidden?	no

4. `clip-path`

The clip-path property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.

See the Pen
hide with clip-path by SitePoint (@SitePoint)
on CodePen.

clip-path offers scope for interesting animations, although it should only be relied on in modern browsers.

metric	effect
browser support	modern browsers only
accessibility	content still read by some applications
layout affected?	no — the original dimensions remain
rendering required	paint
performance	reasonable
animation frames possible?	yes, in modern browsers
events triggered when hidden?	no

5. `visibility`

The visibility property can be set to visible or hidden to show and hide an element.

See the Pen
hide with visibility: hidden by SitePoint (@SitePoint)
on CodePen.

The space used by the element remains in place unless a collapse value is used.

metric	effect
browser support	excellent
accessibility	content not read
layout affected?	no, unless `collapse` is used
rendering required	composition, unless `collapse` is used
performance	good
animation frames possible?	no
events triggered when hidden?	no

6. `display`

The display property is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.

See the Pen
hide with display: none by SitePoint (@SitePoint)
on CodePen.

However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using position: absolute or the new contain property is adopted.

display is also overloaded, with options such as block, inline, table, flexbox, grid and more. Resetting back to the correct value after display: none; can be problematic (although unset may help).

metric	effect
browser support	excellent
accessibility	content not read
layout affected?	yes
rendering required	layout
performance	poor
animation frames possible?	no
events triggered when hidden?	no

7. HTML `hidden` attribute

The HTML hidden attribute can be added to any element:

<p hidden>
  Hidden content
</p>

This applies the browser’s default style:

[hidden] {
  display: none;
}

This has the same benefits and flaws as display: none, although it could be useful when using a content management system that doesn’t permit style changes.

8. Absolute `position`

The position property allows an element to be moved from its default static position within the page layout using top, bottom, left, and right. An absolute positioned element can therefore be moved off-screen with left: -999px or similar.

See the Pen
hide with position: absolute by SitePoint (@SitePoint)
on CodePen.

metric	effect
browser support	excellent, unless using `position: sticky`
accessibility	content still read
layout affected?	yes, if positioning is changed
rendering required	depends
performance	reasonable if careful
animation frames possible?	yes, on `top`, `bottom`, `left`, and `right`
events triggered when hidden?	yes, but it may be impossible to interact with an off-screen element

9. Overlay Another Element

An element can be visually hidden by positioning another over the top which has the same color as the background. In this example, an ::after pseudo-element is overlaid, although any child element could be used.

See the Pen
hide with an overlay by SitePoint (@SitePoint)
on CodePen.

While technically possible, this option requires more code than other options.

metric	effect
browser support	excellent
accessibility	content still read
layout affected?	no, if absolutely positioned
rendering required	paint
performance	reasonable if careful
animation frames possible?	yes
events triggered when hidden?	yes, when a pseudo or child element is overlaid

10. Reduce Dimensions

An element can be hidden by minimizing its dimensions using width, height, padding, border-width and/or font-size. It may also be necessary to apply overflow: hidden to ensure content doesn’t spill out.

See the Pen
hide with width or height by SitePoint (@SitePoint)
on CodePen.

Interesting animated effects are possible, but performance is noticeably better with transform.

metric	effect
browser support	excellent
accessibility	content still read
layout affected?	yes
rendering required	layout
performance	poor
animation frames possible?	yes
events triggered when hidden?	no

Hidden Choices

display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance.

For some really cool demos on how to show and hide images with CSS, check out How to Add a CSS Reveal Animation to Your Images.

FAQs on How to Hide Elements in CSS

How to Hide an Element in CSS?

There are many ways to hide elements in CSS. Which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. Common methods include using the display property, visibility, opacity, height and width, positioning, and the CSS clip property. We cover each of these methods, and more, in this article, and look at how each affects accessibility and SEO.

How to Hide Element in CSS Without Display None?

Using display: none may be the easiest way to hide an element with CSS, but it can have serious side effects for accessibility and SEO. There are at least nine other ways to hide elements with CSS that are often far superior to display: none — including filter and opacity, color transparency, transforms, clip-path, visibility, the HTML hidden attribute, positioning, element overlays and reduced dimensions.

What Is the Opposite of Hiding in CSS?

In CSS, we often want to hide elements, only to later show, reveal or display them. We can control both hiding and showing/revealing elements with CSS, or we can also use JavaScript along with CSS to show/hide elements.
The most common way to display an element is by using the display property with a value of block, inline, inline-block, flex, grid, or another appropriate value depending on the desired layout behavior. For example:
/* Show an element as a block-level element */ .element { display: block; }
/* Show an element as an inline-level element */ .element { display: inline; }
/* Show an element as an inline-block element */ .element { display: inline-block; }
You can also use JavaScript to toggle the display property of an element from none (hidden) to its default value (usually block or inline) when you want to dynamically show or hide elements in response to user interactions or other events.

How to Hide an Element Based on a Value in CSS?

In CSS, you can hide an element based on its value using a combination of selectors and CSS properties. The exact approach you take will depend on the type of element and the value you want to use as the condition for hiding. Here are a few common scenarios:
1. Hiding an Element Based on Its Content (Text):
If you want to hide an element based on its textual content, you can use the :contains selector. However, it’s important to note that :contains is not a standard CSS selector and is not supported by all browsers. You might need to use JavaScript or another method for better compatibility.
/* This example uses jQuery for :contains */ .element:contains("Hide this text") { display: none; }
2. Hiding an Element Based on an Attribute Value:
If you want to hide an element based on the value of an attribute, such as data-* attributes, you can use attribute selectors. Here’s an example:
<div data-hide="true">This should be hidden</div> <div data-hide="false">This should be visible</div>
/* Hide elements with data-hide="true" */ [data-hide="true"] { display: none; }
3. Hiding an Element Based on a Class or ID:
You can also use classes or IDs to hide elements based on their value. For instance, if you have a specific class or ID assigned to elements you want to hide, you can use CSS like this:
<div class="hide-me">This should be hidden</div> <div class="show-me">This should be visible</div>
/* Hide elements with the class "hide-me" */ .hide-me { display: none; }
4. Hiding an Element Based on a Specific Value with JavaScript:
If you need to hide an element based on more complex conditions or values that aren’t easily handled with CSS alone, JavaScript is a more suitable choice. You can use JavaScript to add or remove classes, change styles, or manipulate the DOM based on specific criteria.
Here’s an example using JavaScript and a hypothetical shouldHide function:
<div id="elementToHide">This should be hidden</div> <div id="elementToShow">This should be visible</div>
<script> // Replace this condition with your specific logic if (shouldHide()) { document.getElementById("elementToHide").style.display = "none"; } </script>
Remember to replace shouldHide() with your own logic that determines whether the element should be hidden or not.
So CSS can be used to hide elements based on their content, attributes, classes, or IDs to some extent. However, for more complex conditions or dynamic values, JavaScript is often required for better control and flexibility.

How Do I Hide Content in HTML

Hiding content is most commonly done with CSS. There are many ways to do this, and which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

Does hiding elements with CSS hurt accessibility?

The simple answer is: it depends. Hiding elements with display: none, while convenient, is certainly bad for accessibility. Thankfully, there are ways to hide and show content that can be made accessible — both to keyboard users and even screen readers. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

Does hiding elements with CSS hurt SEO?

Hiding elements with CSS definitely can have implications for SEO (Search Engine Optimization), and it’s important to be cautious when using CSS to hide elements on a webpage. Whether it hurts your SEO or not depends on the context and your intent.
Here are some considerations:
Hidden Content for SEO Manipulation. If you’re hiding content solely for the purpose of manipulating search engine rankings, such as keyword stuffing or hiding links, it’s considered a black hat SEO technique and can result in penalties from search engines if detected. Search engines aim to provide relevant and useful content to users, so they don’t like to see content hidden solely for ranking purposes.
User Experience Matters. Search engines like Google prioritize user experience. If you hide content in a way that harms user experience, such as making it difficult for users to find information or navigate your site, it can indirectly impact your SEO. High bounce rates or low user engagement can signal to search engines that your site may not be providing valuable content.
Legitimate Uses of CSS Hiding. There are legitimate reasons to use CSS to hide elements, such as creating mobile-responsive designs or improving accessibility. For example, you might use CSS to hide certain elements on mobile devices to improve the layout and usability. If you’re using CSS to enhance user experience, it’s less likely to negatively impact SEO.
Google’s Guidelines. Google provides guidelines on how to handle hidden content. They generally advise against hiding content with CSS for SEO purposes, but they do recognize legitimate uses like improving mobile user experience or providing alternative text for visually impaired users. It’s crucial to follow these guidelines.
Javascript-generated Content. Content that’s generated by JavaScript and not visible in the initial HTML source can also have SEO implications. Search engines have become better at indexing JavaScript-generated content, but it’s essential to ensure that critical content is visible to both users and search engine crawlers.
So, to summarize, hiding elements with CSS can certainly hurt SEO if it’s done for manipulative purposes or if it degrades user experience. However, if done for legitimate reasons like improving mobile responsiveness or accessibility, it’s less likely to have a negative impact. Always follow search engine guidelines, create content that benefits users, and focus on providing a positive user experience to maintain good SEO practices.