Simple CSS Logo

Brightness Modifiers

Simplicity offers classes to lighten or darken an element's background when you hover over them. Based off some limited testing, this appears to look the best when applied subtly such as when using .brighten-1 through .brighten-3.

It's possiblt to permanently keep an element brightened or darkened. For example, if you'd like to keep the element permanently brightened at the .brighten-1 brightness, use .brightened-1 instead.

There are 6 stages of brightening or darkening that can be applied.

Brightening

Hover over each element to see how the brightness changes.

brighten-1

brighten-2

brighten-3

brighten-4

brighten-5

brighten-6

Permanently Brightening

brightened-1

brightened-2

brightened-3

brightened-4

brightened-5

brightened-6

Darkening

darken-1

darken-2

darken-3

darken-4

darken-5

darken-6

Permanently Darkening

darkened-1

darkened-2

darkened-3

darkened-4

darkened-5

darkened-6