# CSS: “opacity”: X is not a “opacity” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-opacity-x-is-not-a-opacity-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `opacity` property takes a number such as `0.5` or a percentage such as `50%`, so a quoted value like `""` is invalid.

`opacity` sets how transparent an element and its content are, from `0` (fully transparent) to `1` (fully opaque, the initial value). Quotes turn whatever is between them into a CSS string, and `opacity` doesn't accept strings. `""` is an empty string, and `"0.5"` fails for the same reason even though the number inside it is fine. Browsers drop the declaration, so the element keeps the opacity set by other rules, or stays fully opaque.

The empty pair of quotes often comes from a template or script that wraps the value in quotes and has nothing to print, as in `style='opacity: "{{ opacity }}"'` when the setting is empty. Write the number without quotes, or leave the declaration out when there's no value. Any other value the property can't parse, such as the word `undefined` printed by a script, gets the same message.

Numbers outside the `0` to `1` range, such as `1.5`, are valid: browsers clamp them to the nearest limit. Global keywords such as `inherit` work too.

## Invalid example

```html
<div class="banner" style='opacity: "";'>
  <p>Spring offers</p>
</div>
```

## Valid example

```html
<div class="banner" style="opacity: 0.8;">
  <p>Spring offers</p>
</div>
```