Chakra-UI

I♥️Components

Gradients

|

Chakra Docs

|

⦾ Chakra UI supports CSS gradients right out of the box. You can use CSS gradient values directly, or leverage the theme's color palette to create consistent and beautiful gradient effects.
  • Linear Gradient: You can apply linear gradients using standard CSS syntax.
  • Radial Gradient: Similarly, you can apply radial gradients using CSS syntax.

When creating gradients, you can use any valid CSS color value, including named colors, hex codes, rgb/rgba values, and hsl/hsla values. However, gradients in Chakra UI have a limitation. Since gradient values often contain commas, they cannot be used with the responsive array syntax directly.

To import the Box component used below:

Examples

This Box has a linear gradient background.
This Box has a radial gradient background.

This is a box with a linear gradient

This is a box with a radial gradient

To work around the limitation mentioned above, you can define gradient values in the theme and reference them by name:

Did you know?

Creative Idea No. 1

Gradient Text: While gradients are usually used for backgrounds, you can also apply them to your text in Chakra UI. This could help you to create unique headings or highlight specific parts of your text. It's not a widely used approach, and knowing this could add an extra layer of creativity to your project:

Gradient Text

Code

Creative Idea No. 2

Animating Gradients: While Chakra UI does not have built-in gradient animation functionality, you can leverage the power of @keyframes and CSS-in-JS to create beautiful gradient animations.
I am an animated Gradient.

Code

Creative Idea No. 3

On Buttons: You can use gradients on various interactive components like buttons to add more color depth and make them more appealing. Remember, be sure to maintain a balance, as overuse of gradients can make the UI look chaotic.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.