What is the difference between “opacity” and “filter: opacity()”

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide
hardware acceleration for better performance. Negative values are not
allowed.

filter: opacity() applies transparency.
A value of 0% is completely transparent. A value of 100% leaves the
input unchanged. Values between 0% and 100% are linear multipliers on
the effect. This is equivalent to multiplying the input image samples
by amount. If the “amount” parameter is missing, a value of 100% is
used.

Source: https://css-tricks.com/almanac/properties/f/filter/

/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity {
  filter: opacity(0.3);
  height: 5rem;
  width: 5rem;
  background-color: mediumvioletred;
}

/*
* -----------
* standard opacity
* -----------
*/

.just-opacity {
  opacity: 0.3;
  height: 5rem;
  width: 5rem;
  background-color: lawngreen;
}

<div class="filter-opacity">
  filter-opacity
</div>

<div class="just-opacity">
  just-opacity
</div>