Getting Started with KendoReact ColorGradient

The KendoReact ColorGradient renders a gradient, a hue and an alpha slider, and inputs to manually enter the desired color.

The KendoReact ColorGradient is distributed through NPM under the kendo-react-inputs package.

The ColorGradient component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the ColorGradient in action.

class App extends React.Component {
    state = { value: 'rgba(195, 0, 47, 1)' };

    render() {
        return (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                    backgroundColor: this.state.value,
                    width: '490px',
                    height: '290px',
                    backgroundImage: 'url("")'
                }} />
                    style={{ marginTop: '10px' }}
            </div >

    onChange = (event) => {
        this.setState({ value: event.value });

    <App />,

Functionality and Features