Skip to main content

​
Overview

Contrast utilities are bundled and work best on images, badges, and visual surfaces that need sharper or softer tonal separation.
ClassFilter (CSS)Usage
.contrast-75filter: contrast(0.75);Softer separation
.contrast-90filter: contrast(0.9);Slightly muted contrast
.contrast-100filter: contrast(1);Neutral / no change (matches preview scale)
.contrast-110filter: contrast(1.1);Slightly punchier imagery
.contrast-125filter: contrast(1.25);Stronger tonal separation

​
Example

​
Markup

<div class="elementor-element contrast-110">
  <img alt="Higher contrast media" src="card-art.jpg"/>
</div>

​
Best Practices

  • Use small contrast adjustments first before reaching for stronger values.
  • Test both light and dark contexts because contrast changes feel different in each.
  • Avoid over-processing UI imagery that already has strong tonal separation.
  • Combine with brightness intentionally when refining hero or card media.

Brightness

Balance contrast with brightness changes

Hue Rotate

Change color families after tonal corrections

Drop Shadow

Add alpha-aware depth with the shipped drop-shadow utilities

Layout

Position media and overlays cleanly