Filter Grayscale

Apply grayscale filter

Syntax

visual="grayscale:[value]"

Values

Value	CSS Output	Description
none	filter: grayscale(0%)	No grayscale
partial	filter: grayscale(50%)	50% grayscale
full	filter: grayscale(100%)	Full grayscale

Examples

<img visual="grayscale:full">Black and white</img>

Preview

Grayscale Filter

visual="grayscale:full" - Convert to grayscale

none

partial

full

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">none</div>
  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

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