Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Brightness utilities are bundled and work well for hero media, image overlays, and quick tonal corrections when the source asset should stay unchanged.
ClassFilter (CSS)Usage
.brightness-75filter: brightness(0.75);Noticeably dimmed media
.brightness-90filter: brightness(0.9);Slight dim for backgrounds behind text
.brightness-100filter: brightness(1);Neutral / no change (matches preview scale)
.brightness-110filter: brightness(1.1);Light lift
.brightness-125filter: brightness(1.25);Stronger lift; use sparingly

​
Example

​
Markup

<img alt="Dimmed image" class="brightness-90 rounded-xl" src="banner.jpg"/>

​
Best Practices

  • Reduce brightness for background media behind text.
  • Increase brightness sparingly to avoid washed-out visuals.
  • Pair brightness with contrast carefully so images stay readable.
  • Prefer opacity alone when you only need a simple dimming effect.

Contrast

Tune contrast alongside brightness

Saturate

Adjust color intensity after brightness changes