CSS Filters & Blending

How filters and blending work: blur, brightness, contrast, hue-rotate, duotone, frosted glass and more, computed per pixel from the W3C formulas; drag the split line to compare.

Tech: filter 公式, backdrop-filter, 颜色矩阵, Canvas ImageData

• Blur — By replacing each pixel with the average of a circle of pixels around it, the details of the image were erased.
• Brightness — Red, Green, The waive Proportion 182
• Contrast — The distance from each channel to the centre is multiplied by a multiple, with middle ash (0.5).
• Saturation — First, you figure out the "grey" of the colour, then you zoom in or out of the grey.
• Hue Rotate — Turn each colour over the rings at the same angle, and the brightness remains essentially unchanged.
• Invert — Change every channel to 255 minus it. Black to white, White to black, Red turns green, Leaders, just like old film negatives.
• Grayscale — Change the colour to the same gray with the same brightness.
• Sepia — Impersonating the effects of old photographs with brown hair.
• Drop-shadow Glow — Unlike box-shadow, the drop-shadow creates shadows along the true contours of the graphic (including transparency areas), so stars
• Neon Combo — The neon lights have the effect of stacking several layers of filters Coordinating a wide range, Transparent color glitter (drop-shadow), middle
• Frosted Glass — To blur the contents behind the cards, and cover a half-transparent white side with a bright side that looks like a sandglass.
• Duotone — First turn the picture to greyscale and keep only "light or dark" information; then set two colours, darkest in the dark, brightest in the brightest
• Glitch Jitter — Simulation of bad signals on television.
• Vignette — Letting the picture get darker and focus on the center, often in photography and movies.
• Glowing Edge — Draw contour lines only for graphics and add the same colour to the contour lines (drop-shadow) / I'll get
• Backdrop Blur — Navigation bar for iOS, It's the effect of informing the center that the contents are rolling under the card, and the parts that you see through the card are vague, and you can see what's down there