React Chakra UI Gradient

Last Updated : 19 Feb, 2024

React Chakra UI Gradients allow you to add stylish and visually appealing backgrounds. Gradients are a blend of two or more colors that transition smoothly from one to another. In this article, we will learn about the implementation of the Gradients in Chakra UI.

Prerequisites:

Approach:

We have used the ChakraProvider wrapper component that ensures the availability of Chakra UI styles and theming throughout the application. We have created a text gradient and different styles of box gradient by using the bgGradient and bgClip properties. bgGradient property is used to create a background gradient effect and bgClip property is used to create a text gradient.

You can use different types of CSS gradient such as Linear, Radial, Conic etc.. inside bgGradient property. It also support different directions such as to-t(to top), to-tr(to top right), to-r(to right), to-br(to bottom right), to-b(to bottom) etc…

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Project Structure:

chakraUI-Gradient-Structure

The updated dependencies in package.json file:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: The below example is demonstrating the use of Gradient in Chakra UI.

Javascript

//File path: src/App.js
import {
  ChakraProvider,
  Box, Heading
}
from '@chakra-ui/react';
 
function App() {
 
  return (
    <>
      <ChakraProvider>
        <Box textAlign="center">
          <Heading
            bgClip="text"
            bgGradient="linear(to-r, #ff005a, #0a60eb)">
            Chakra UI Gradient | GeeksForGeeks
          </Heading>
        </Box>
 
        <Box display='flex' justifyContent='center'
          mx='50px' my='20px' gap='15px'>
 
          <Box height='200px' width='200px'
            bgGradient='linear(red 15%, green 35%, blue 50%)'>
          </Box>
 
          <Box height='200px' width='200px'
            bgGradient='linear(to-t, red, green, blue)'>
          </Box>
 
          <Box height='200px' width='200px'
            bgGradient='linear(to-tr, red, green, blue)'>
          </Box>
 
          <Box height='200px' width='200px'
            bgGradient='linear(to-b, red, green, blue)'>
          </Box>
 
          <Box height='200px' width='200px'
            bgGradient='linear(to-br, red, green, blue)'>
          </Box>
 
          <Box height='200px' width='200px'
            bgGradient='linear(to-l, red, green, blue)'>
          </Box>
        </Box>
      </ChakraProvider>
    </>
  );
}
 
export default App;