Opacity

Utilities for controlling the opacity of an element.

Usage

Control the opacity of an element using the opacity={ratio} utilities.

<x.div opacity={1} />
<x.div opacity={0.75} />
<x.div opacity={0.5} />
<x.div opacity={0.25} />
<x.div opacity={0} />

Responsive

To control the opacity of an element at a specific breakpoint, use responsive object notation. For example, adding the property opacity={{ md: 0.5 }} to an element would apply the opacity={0.5} utility at medium screen sizes and above.

<x.div opacity={{ md: 0.5 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.