Opacity

Set element opacity (0-100)

Syntax

visual="opacity:[value]"

Values

Value	CSS Output	Description
0	opacity: 0	Invisible
25	opacity: 0.25	25% visible
50	opacity: 0.5	50% visible
75	opacity: 0.75	75% visible
100	opacity: 1	Fully visible

Examples

<div visual="opacity:50">Half visible</div>

Preview

Opacity

visual="opacity:50" - Control element transparency from invisible to fully visible

25%

50%

75%

100%

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 opacity:25">25%</div>
  <div space="p:small" visual="bg:primary text:white rounded:small opacity:50">50%</div>
  <div space="p:small" visual="bg:primary text:white rounded:small opacity:75">75%</div>
  <div space="p:small" visual="bg:primary text:white rounded:small opacity:100">100%</div>
</div>