Gradients#

Usage#

Gradients can be applied via style props, the styled function or the applyTheme function.

Using style props#

Editable example

Using styled#

Editable example

Using applyTheme#

Editable example

Middle colors#

You can specify a middle color with the gradientVia prop.

Editable example

Text#

Bumbag UI
Editable example

Stops#

Editable example

Responsive gradients#

Gradients can also be responsive if you supply a breakpoint object as the CSS prop value.

Editable example

Pseudo gradients#

Gradients are also supported on pseudo props (such as: _hover, _hoveractive and _focus).

Hover#

Editable example

Hover while active#

Editable example

Focus#

Editable example
Copyright © 2021 Jake Moxey