How to define Opacity by percentage in CSS?

Question

Is it possible to define opacity in CSS by percentage (eg 30%) in CSS? does not seem to be working, right now I can only conduct it by decimal point.

https://css-tricks.com/almanac/properties/o/opacity/

.test{
   opacity: 0.3;
}

Intended Goal:

.test{
   opacity: 30%;
}

why? these mean the same thing.... you have to go with whats in teh standard. — Daniel A. White, Jul 12 '19 at 18:49
From your own link "Values are a number from 0 to 1 representing the opacity of the channel (the "alpha" channel)." — doublesharp, Jul 12 '19 at 18:50
They are effectively the same thing too so not sure what there is to gain either. — doublesharp, Jul 12 '19 at 18:50
Just curious: Why would one want to use percentages here in favor of decimals? — Wouter van Koppen, Jul 12 '19 at 18:50
I don't think the downvotes are warranted here - it's possible for a valid question to have an answer that is just "no". — Ian, Jul 12 '19 at 19:03
@WoutervanKoppen because it's more intuitive in some case and it's also possible with opacity — Temani Afif, Jul 12 '19 at 19:48
@doublesharp having an integer `30` or a float `0.3` isn't really the same thing. There is some difference especially when it comes to some complex calcuation and rounding. You have at least the possibility to use 2 more digit with a percentage value since there a factor of `100` — Temani Afif, Jul 12 '19 at 19:50

score 14 · Answer 1 · answered Feb 18 '20 at 15:01

14

Using a percentage is fully valid css, according to the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Values

alpha-value A number in the range 0.0 to 1.0, inclusive, or a percentage in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

So, either of these should be okay, according to spec:

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

Keep in mind, though, that if you are using Sass, it will not handle the percentage value, and will compile it to 1%.

answered Feb 18 '20 at 15:01

tiennen07

366
3
6

1

some browsers do not support percentage range in opacity (edge, safari ...) – Jimmmy Feb 18 '20 at 15:27
3

Take care, the `mozilla developer network` is not the official documentation of the css standard. Percentages are not valid css for the `opacity` property, accordingly to the real official documentation: https://www.w3.org/TR/css-color-3/#transparency – leoap Mar 08 '20 at 19:42
3

this sass bug is what bugged me for half an hour until I tried the decimal. – Timar Ivo Batis Apr 03 '20 at 15:40
2

The full browser support can be seen at [caniuse](https://caniuse.com/mdn-css_properties_opacity_percentages): currently it’s only Edge, Firefox and Chrome released since late 2019/early 2020 – Charlie Harding Dec 02 '20 at 09:31
I just did a quick test on my mac and it looks like `opacity: n%` now works in Safari too (16.3). [Caniuse says it doesn't](https://codepen.io/RBSLGadellaa/pen/BaPGWoX) and 16.3 is pretty new so you may want to wait a bit before actually putting this in prod :) – REJH Feb 01 '23 at 14:56

score 1 · Accepted Answer · answered Jul 12 '19 at 19:01

If you really want to use a 0 to 100 range, you can calculate the decimal automatically:

element {
  opacity: calc(40 / 100);
}

or you can use a variable to make it clearer:

element {
  --opacity-percent: 40;
  opacity: calc(var(--opacity-percent) / 100);
}

But both of these are less clear than just using a decimal like the standard says, so I wouldn't recommend them unless there's a really valid reason.

Temani Afif · Answer 3 · 2019-07-12T19:52:26.550

Yes it's possible if you consider filter

.box {
  filter:opacity(30%);
  background:red;
  height:20px;
}

<div class="box">

</div>

You will even have better performance because:

This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.^ref

Simply pay attention to some special behavior related to stacking context: CSS-Filter on parent breaks child positioning

score 0 · Answer 4 · answered Jul 12 '19 at 18:59

According to the docs, it has to be a number between 0 and 1.

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity https://www.w3schools.com/cssref/css3_pr_opacity.asp

I'm not sure why you would want a percent instead of this number considering they are the same thing (just divide by 100).

score 0 · Answer 5 · answered Jul 12 '19 at 19:00

0

No, decimals only.

Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

answered Jul 12 '19 at 19:00

j08691

204,283
31
260
272

mwfearnley · Answer 6 · 2023-04-24T08:42:36.693

Despite what the most popular answer (and Mozilla) say, comments by leoap and Charlie Harding have observed that opacity percentages are not officially supported.

W3 doesn't mention percentages for opacity, and Can I Use shows mixed browser support for it in the real world, outside of recent Chrome, Edge and Firefox.

So if in any doubt about which browsers will see your content, it's best to avoid it and stick with decimals.

How to define Opacity by percentage in CSS?

6 Answers6

Linked