Gradients

React Bootstrap 5 Gradient component

Bootstrap React gradient effect is a linear color progression - a smooth transition between two colors. The gradient effect can be used in a variety of components.

To learn more read Docs.


Gradient buttons

        
            
        import React from 'react';
        import { MDBBtn } from 'mdb-react-ui-kit';

        export default function App() {
          return (
            <MDBBtn
              style={{ background: 'linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5))' }}
            >
              Gradient
            </MDBBtn>
          );
        }