Gosub filters & opacity test

filter functions, backdrop-filter, opacity, alpha colours, and mix-blend-mode.

filter functions

none

none

blur

blur(3px)

brightness

brightness(1.6)

contrast

contrast(1.8)

grayscale

grayscale(1)

sepia

sepia(1)

invert

invert(1)

saturate

saturate(3)

hue-rotate

hue-rotate(120deg)

drop-shadow

drop-shadow(…)

combo

chained filters

backdrop-filter

backdrop blur

backdrop-filter: blur(8px) — blurs what's behind the panel

opacity

1.0

opacity: 1

0.75

opacity: .75

0.5

opacity: .5

0.25

opacity: .25

0.1

opacity: .1

opacity vs alpha colour

whole group
faded

opacity fades element and its text

rgba bg

rgba(…,.4) — text stays opaque

hsla bg

hsla(…,.4)

mix-blend-mode

multiply

screen

overlapping circles with multiply / screen blending over a gradient