:muted CSS Pseudo Class


The CSS :muted pseudo-class selector represents an element that is capable of making sound, such as an <audio> or <video> element, but is muted (forced silent). Muted is different from :volume-locked in that the page author has control over whether a media element can be muted or un-muted.

The :muted pseudo-class can be used to style muted media elements differently than unmuted media elements. For example, you could use it to make muted media elements less visually prominent, or to display a message indicating that the media is muted.

Here is an example of how to use the :muted pseudo-class to style muted video elements:

video:muted {
opacity: 0.5;
filter: grayscale();

This will make muted video elements 50% transparent and grayscale.

The :muted pseudo-class is a relatively new CSS feature, and it is not supported by all browsers yet. However, it is becoming increasingly popular, and it is a good idea to start using it now to ensure that your website looks good in all browsers.<


:muted {
  /* ... */


No example, see css tab for code example.
:muted {
outline: 5px solid red;

video:muted {
outline: 5px solid blue;

Browser Support

The following table will show you the current browser support for the CSS :muted pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023