Gradient React Component

Usage

import {
	GradientCircle,
	GradientContent,
	GradientContain,
} from 'gradient-react';

const MyComponent = () => (
    <GradientContain styles={{ width: '500px', maxWidth: '100%' }}>
        <GradientCircle
            color1='#01ccc9'
            color2='#01a7cc'
            blur='70'
            width='250px'
            height='250px'
        />
        <GradientCircle
            color1='#eb0ea1'
            blur='50'
            color2='#cc0101'
            width='300px'
            height='300px'
        />
        <GradientContent>
            <h3>Title</h3>
            <p>Description</p>
        </GradientContent>
    </GradientContain>
);

Title

Description

Components

Gradient Circle


import { GradientCircle } from 'gradient-react';

const MyComponent = () => (
	<GradientCircle
		color1="#7701cc"
		color2="#01a7cc"
		width="350px"
		height="350px"
                styles={{
                    left: '130px',
                    top: '300px',
                }}
	/>
);

Property	Description	Default Value
color1	The color of the circle's center	'#ED0101'
color2	The color of the circle's outer edge	'#CC2A01'
width	The width of the circle	'200px'
height	The height of the circle	'200px'
blur	The intensity of the circle's blur	'80'
styles	CSS styles applied to the container	{}

Gradient Content


import { GradientContent } from 'gradient-react';

const MyComponent = () => (
	<GradientContent
            styles={{
                display: 'flex',
                flexDirection: 'column',
                alignContent: 'center',
                justifyContent: 'center',
                width: '100%',
            }}
    >
		<h2>Section Title</h2>
		<p>Generic text</p>
	</GradientContent>
);

Property	Description	Default Value
styles	CSS styles applied to the container	{}

Gradient Contain


import { GradientContain, GradientCircle, GradientContent } from 'gradient-react';

const MyComponent = () => (
	<GradientContain styles={{ margin: '100px', padding: '20px' }}>
		<GradientCircle
			color1="#7701cc"
			color2="#01a7cc"
			width="350px"
			height="350px"
		/>
		<GradientCircle
			color1="#eb540e"
			blur="50"
			color2="#cc0101"
			width="450px"
			height="450px"
		/>
		<GradientContent>
			<h2>Section Title</h2>
		        <p>Generic text</p>
		</GradientContent>
	</GradientContain>
);

Property	Description	Default Value
styles	CSS styles applied to the container	{}