#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
On this page
Copyright © 2021 Jake Moxey