Filter Brightness

Adjust brightness

Syntax

visual="brightness:[value]"

Values

Value	CSS Output	Description
dim	filter: brightness(0.5)	50% brightness
dark	filter: brightness(0.75)	75% brightness
normal	filter: brightness(1)	Normal brightness
bright	filter: brightness(1.25)	125% brightness
vivid	filter: brightness(1.5)	150% brightness

Examples

<img visual="brightness:bright">Brighter image</img>

Preview

Brightness Filter

visual="brightness:bright" - Adjust element brightness

dim

normal

vivid

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small brightness:dim">dim</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
  <div space="p:small" visual="bg:primary text:white rounded:small brightness:vivid">vivid</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="filter:[custom-value]">Custom</div>