Gradient Color Stops

Utilities for controlling the color stops in background gradients.

Starting color

Set the starting color of a gradient using the gradientFrom={color} utilities.

<x.div backgroundImage="gradient-to-r" gradientFrom="red-500" />

Gradients fade out to transparent by default.

Ending color

Set the ending color of a gradient using the gradientTo={color} utilities.

<x.div
  backgroundImage="gradient-to-r"
  gradientFrom="teal-400"
  gradientTo="blue-500"
/>

Gradients to do not fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a gradientFrom={color} utility.

Middle color

Add a middle color to a gradient using the gradientVia={color} utilities.

<x.div
  backgroundImage="gradient-to-r"
  gradientFrom="purple-400"
  gradientVia="pink-500"
  gradientTo="red-500"
/>

Gradients with a gradientFrom={color} and gradientVia={color} will fade out to transparent by default if no gradientTo={color} is present.

Responsive

To control the gradient color stops of an element at a specific breakpoint, use responsive object notation. For example, adding the property gradientFrom={{ md: "red-500" }} to an element would apply the gradientFrom="red-500" utility at medium screen sizes and above.

<x.div gradientFrom={{ md: 'red-500' }} />

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

Customizing

Colors

If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

  // theme.js
  import { th, generateHexAlphaVariants } from '@xstyled/styled-components'

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
    }),
  }