GradientBorder
The GradientBorder component is a wrapper component which provides a gradient border for the children inside. It uses MUI Box in base and you can use all of the props from MUI Boxfor the GradientBorder component. The child component shouldn't have a transparent background.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Vision UI Dashboard React components
import VuiBox from "components/VuiBox";
Box
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| bgImage | string | radial-gradient(69.43% 69.43% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) | Change the GradientBorder background image, resulting in a differnt "border" for the child component. |
| opacity | number | 1 | Change the GradientBorder opacity. |
| borderRadius | string | none | Set a border radius for the GradientBorder. |
| MUI Props | You can pass all of the MUI System Properties for the GradientBorder as well. |