Hiding an Element with CSS: Display vs Visibility vs Opacity

September 17, 20215 min read

This vs That

CSS offers various ways to hide elements on a web page, but it’s important to understand the differences between them in order to choose the right one for your specific use case. In this blog post, we will explore the display: none, visibility: hidden, and opacity: 0 properties and how they can be used to hide elements.

Here’s a quick comparison table:
Property Description Collapses Events Tab Order Animatable
display: none Hides an element and takes up no space in the layout
visibility: hidden Hides an element but takes up space in the layout
opacity: 0 Makes an element fully transparent but still takes up space in the layout
##### display: none

The display property determines how an element is displayed on the web page. The none value completely removes the element from the document, including all its children. This means that the element will not take up any space on the page and will not be visible to the user.

.toggle {
  display: none;

One important thing to note about display: none is that it not only hides the element, but it also removes it from the document entirely. This means that any events or interactions associated with the element will no longer work. For example, if the element is a button that triggers an action when clicked, that action will no longer be triggered when the button is hidden using display: none.

visibility: hidden

Unlike display: none, the visibility: hidden property does not remove the element from the document. Instead, it only hides the element and leaves empty space where the element would have been.

.toggle {
  visibility: hidden;

This can be useful in cases where you want to hide an element but still want to preserve its layout and keep its space on the page. For example, if you have a navigation menu with multiple items and you want to hide one of the items temporarily, using visibility: hidden will allow you to keep the layout of the menu intact.

opacity: 0

The opacity property determines the transparency of an element. A value of 0 means that the element is completely transparent and not visible to the user.

.toggle {
  opacity: 0;

Like visibility: hidden, opacity: 0 does not remove the element from the document. It only makes the element transparent, so it will still take up space on the page and any events or interactions associated with the element will still work.

Choosing the right property

When it comes to hiding elements, you should choose the right property based on your specific needs. Here are some general guidelines to help you make the right decision:

  • If you want to completely remove the element from the document and change layout, use display: none.
  • If you want to hide the element but preserve its layout and space on the page, use visibility: hidden.
  • If you want to hide the element but still allow it to interact with the user, use opacity: 0.

It’s important to note that these properties can be used in combination with each other, depending on your needs. For example, you can use opacity: 0 to make an element transparent and visibility: hidden to hide it, or you can use display: none to remove an element from the document and opacity: 0 to make it transparent. This is useful when you are adding a complex animation using keyframes and need to have different behaviors in animation cycle.


In conclusion, the display:none, visibility:hidden, and opacity:0 CSS properties are all useful for hiding elements on a webpage. display:none completely removes the element from the page, while visibility:hidden and opacity:0 only hide the element but still take up space on the page. It’s important to consider which one is most appropriate for the specific situation, as they can affect the layout and functionality of the page in different ways. Understanding and utilizing these properties can help create a more polished and visually appealing website.

Vishal Sharma

Hey there! This is Vishal Sharma. I reside and work at Gurgaon, India. I am a Software Engineer and primarily works with JavaScript, ReactJS and NodeJS.
LinkedIn Link

Welcome to my Javascript tech blog! Here, you'll find the latest news and updates in the world of Javascript, as well as tutorials and resources to help you improve your coding skills. From learning the basics of Javascript to advanced concepts like object-oriented programming, I post something for developers of all levels. Whether you're just starting out or you're a seasoned pro, you'll find valuable insights and information on our blog. So stay up-to-date with the latest in Javascript technology by bookmarking this page and checking back often.
Thank you for visiting!