CSS Background Gradient Generator- Online CSS Gradient Generator

Copy to clipboard
Type :
LinearRadial
Orientationdeg
COLORHEXPOSITION
+ Add Color

Linear gradient - Background

A linear gradient is a function that generates a linear gradient from one or more colors.

background-image: linear-gradient(orientation, color1 stop1, color2 stop2, ...);

It uses an orientation which is the orientation angle of the gradient, followed by the colors to use for the gradient and their stop positions. The colors so informed constitute a gradient that goes from one point to another of the allocated space.
Example :

background : linear-gradient(111deg,#079bee 20%,#0829be 70%,#031863 100%);

Our tool offers 3 colors by default. However you can use the add color button to add more colors.


Radial gradient - Background

Unlike the linear gradient, which makes a gradient from one point to another, the radial creates a gradient by starting the colors from the same point and spreading them gently outwards in a circular or elliptical shape. Le schéma est le suivant :

radial-gradient(shape, color1 stop1, color2 stop2, ...);

shape represents the type of radial gradient desired, it can be either a circle or an ellipse; followed by the gradient colors and their position or spacing


360
Last updated
2022-05-13