blur(), grayscale(), sepia(), saturate(), and hue-rotate() have no PDF equivalent - a blur needs per-pixel convolution and the colour functions mix channels - so an element carrying one is rendered into a bitmap at 300 dpi, filtered in the order written, and embedded at exactly its own size. Zoom in: the edges of the blur stay smooth, and the unfiltered swatch next to them stays vector. (docs/html-css-support.md#rasterized-effects)
Peach baseline (no filter) filter: none | Peach blur 2px filter: blur(2px) | Peach blur 5px filter: blur(5px) | Peach blur 10px filter: blur(10px) |
Peach grayscale filter: grayscale(1) | Peach sepia filter: sepia(1) | Peach saturate up filter: saturate(2.5) | Peach hue-rotate filter: hue-rotate(120deg) |
Peach half grayscale filter: grayscale(0.5) | Peach desaturated filter: saturate(0.3) | Peach sepia then blur filter: sepia(0.8) blur(3px) | Peach everything together filter: hue-rotate(200deg) saturate(1.6) brightness(1.1) blur(1.5px) opacity(0.9) |