---
title: "What is the CSS property used to control the visibility or hidden state of an element?"  
description: "What is the CSS property used to control the visibility or hidden state of an element?"  
author: "Utpal Vishwas"  
published: 2023-06-06  
updated: 2023-06-07  
canonical: https://www.mindstick.com/forum/158658/what-is-the-css-property-used-to-control-the-visibility-or-hidden-state-of-an-element  
category: "css-css3"  
tags: ["css"]  
reading_time: 2 minutes  

---

# What is the CSS property used to control the visibility or hidden state of an element?

What is the [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) used to [control the visibility](https://www.mindstick.com/forum/158926/what-are-the-access-modifiers-in-c-sharp-and-how-do-they-control-the-visibility-of-class-members) or [hidden](https://www.mindstick.com/forum/2303/skip-validating-field-from-hidden-div) state of an element?

## Replies

### Reply by Aryan Kumar

The CSS property used to [control](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control) the [visibility](https://www.mindstick.com/blog/301300/how-to-improve-your-visibility-in-zero-click-search-results) or hidden state of an element is **visibility**. The visibility property can be set to one of three values:

- **visible** : This is the default value. It means that the element is visible and will take up space on the page.
- **hidden** : This means that the element is not visible, but it will still take up space on the page.
- **collapse** : This is a newer property that means that the element is not visible and it will not take up space on the page.

For example, the following CSS code will hide the `div` element:

Code snippet

```plaintext
div {
  visibility: hidden;
}
```

The visibility property can be used to create a variety of effects, such as:

- **Hiding elements that are not yet ready to be seen** : For example, you might want to hide a navigation bar until the user scrolls down the page.
- **Showing and hiding elements based on user input** : For example, you might want to show a message box when the user clicks on a button.
- **Creating a loading animation** : For example, you might want to show a spinner while the page is loading.

The visibility property is a powerful tool for controlling the visibility of elements on your web pages. By using it correctly, you can create a variety of effects that will make your pages look great and be easy to use.

Here are some additional tips for using the visibility property:

- Use the visibility property sparingly. Hiding elements can make your pages harder to use.
- Use the visibility property to create a clear hierarchy on your pages. Make sure that the most important elements are always visible.
- Use the visibility property to create a sense of movement and animation on your pages.


---

Original Source: https://www.mindstick.com/forum/158658/what-is-the-css-property-used-to-control-the-visibility-or-hidden-state-of-an-element

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.