A reference guide for the CSS `contrast()` filter function, covering its syntax, accepted arguments (numbers and percentages), how it manipulates RGB channels mathematically, and practical use cases such as improving text readability over hero images and adding hover effects to product cards. Also clarifies the difference between `contrast()` and the unrelated `contrast-color()` function.

4m read timeFrom css-tricks.com
Post cover image
Table of contents
SyntaxArgumentsHow contrast() affects colorBasic usageDemo: Making product card images pop on hoverIs contrast() the same as contrast-color() ?Browser supportRelatedbrightness()backdrop-filterfilter

Sort: