CSS Tint Filter

Tint elements by an RGB color with CSS filters.

Multiplying an image by a color has no CSS filter. This page fits a chain of standard filter functions live and compares it with an exact multiply by an SVG feColorMatrix.

npm install css-tint-filter

Image

Static tint

Tint

Original

Exact multiply, SVG

CSS filters

Animated tint

The browser interpolates each filter argument linearly, which drifts off color between two fits. multiplyKeyframes adds keys where that drift would show.

From To

Exact multiply, SVG

Fitted keyframes

Two keyframes