Effects

Things a designer says out loud, with the CSS trick behind each one.

Every effect here is something you would ask for in words — cut the numbers out of the bar, make that panel frosted, fade the bottom of the picture out — and would otherwise have to build from three properties that have to agree with each other. That is why they were unreachable rather than merely fiddly: nobody browses to backdrop-filter, and nobody guesses that a knockout is a blend mode.

They all follow one rule: an effect writes ordinary CSS on the ordinary element. Nothing here is a mode the app remembers, nothing needs this app to be running for the page to look right, and turning one off removes exactly what it added.

Cut out

Numbers knocked out of a bar so the photograph behind shows through them — what a drawing application calls Subtract.

Solid	leave it filled, no hole
Light bar	a white bar, contents cut out of it — for a dark picture behind
Dark bar	a black bar, contents cut out of it — for a light picture behind

Select the words or select the bar; either works. The blend has to go on the bar, because that is the surface the hole is cut in, and the panel says so once rather than pretending the effect belongs to whatever you happened to click.

The black and white are not a colour choice and cannot be one. They are the operands of an arithmetic: screen keeps white and lets black through, so a white bar stays a bar and black glyphs become holes. A dark grey bar does not knock out, it goes murky.

It applies to everything in the box, because that is what a blend does. Anything to be left alone needs a box of its own.

Frosted glass

Blurs whatever is behind the box, the way a panel over a photograph does.

It needs something translucent to look through, and it will tell you when it has not got one — an effect that is on and invisible reads as broken, and the reason is never in the effect itself. Which tint is a colour decision, so the panel asks rather than choosing one for you and leaving it behind when you turn the effect off.

Written prefixed as well as plain, because Safari has never unprefixed it and a frosted panel that is only frosted in Chrome is worse than none.

Fade out

The edge fades away instead of stopping — a photograph running into the page. Pick which edge, and where the fade starts.

It is a mask, not a gradient laid over the top. An overlay has to match whatever is underneath it, so it is wrong the moment the section colour changes; a mask takes the pixels away and is right against anything.

Pressed in

A shadow inside the edge, so the box reads as recessed rather than raised. The same property as an ordinary shadow with one keyword changed — which is exactly why it is worth a control, because nobody finds inset by browsing a shadow scale.

It takes your design system’s shadow and turns every layer of it inward. A system shadow is usually two or three layers, and putting inset in front of the list only turns the first one — leaving the rest sitting outside the box, a raised edge on something meant to look pressed in.