Background Gradient Generator
This intuitive CSS tool simplifies the process of designing vibrant gradient backgrounds. Say goodbye to complex code and tedious color mixing. Our tool provides a user-friendly interface allowing you to effortlessly blend colors and create stunning visual transitions. Simply select your desired colors, adjust their positions and blend modes, and instantly see the results reflected in a real-time preview. Experiment with different colors and gradient types (linear, radial, repeating-linear, repeating-radial) to achieve the perfect look for your gradient background. The generated CSS code is readily copyable and pasteable into your website or application, ensuring seamless integration. Whether you’re a seasoned web developer or a design novice, our tool empowers you to create captivating and visually appealing gradient backgrounds with ease.
Options
Ad #2
Preview
CSS Code
Background Gradient CSS Data Type
The <gradient> CSS data type is a special type of image consisting of a gradual transition between two or more colors.
Gradient types are determined by one of the functions listed below.
- Linear gradient:
- The
linear-gradient()function generates a linear gradient that moves gradually between colors along an imaginary line.
- The
- Radial gradient:
- The
radial-gradient()function generates a radial gradient that moves gradually from its center point of origin.
- The
- Conic gradient:
- The
conic-gradient()function generates a coned-shaped gradient that moves gradually around a circle.
- The
- Repeating gradient:
- A repeating gradient duplicates a gradient as much as necessary to fill the entire area.
- There are three different functions that can generate a repeating visual effect: the
repeating-linear-gradient(),repeating-radial-gradient(), andrepeating-conic-gradient()functions.
CSS Linear Gradient: linear-gradient() Function
To create a CSS linear gradient, at least two colors must be defined: the start color and the end color. To create the desired visual effect and have more control over the <gradient> , you can use additional CSS values, such as direction ( <angle> ), <position> , and more color levels ( <colorstop> ).
Syntax:
background-image: linear-gradient( direction, color1, color2, … );
CSS Radial Gradient: radial-gradient() Function
To create a CSS radial gradient, at least two colors must be defined: the start color and the end color. To create the desired visual effect and have more control over the <gradient> , you can use additional CSS values, such as <shape> , <size> , <position> , and more color levels ( <colorstop> ).
Syntax:
background-image: radial-gradient(shape size at position, start-color, …, end-color);
CSS Conic Gradient: conic-gradient() Function
To create a CSS conic gradient, at least two colors must be defined: the start color and the end color. You can specify additional colors as needed to create more complex gradients. To create the desired visual effect and have more control over the <gradient> , use additional CSS values, such as direction ( <angle> ), <position> , <degree> , and more color levels ( <colorstop> ).
Syntax:
background-image: conic-gradient(from angle at position, color degree, color degree, ...);
CSS Repeating Gradients
To create a CSS repeating gradient, either of the following functions can be used: repeating-linear-gradient() or repeating-radial-gradient() or repeating-conic-gradient() . At least two colors must be defined: the start color and the end color. You can specify additional colors as needed to create more complex gradients.
To create the desired visual effect and have more control over the <gradient> , the following CSS values will help on that:
- repeating-linear-gradient() function:
-
<angle>or<side-or-corner>– this defines the direction of the gradient. -
<angle>– can be literally an angle value (e.g., 0deg, 45deg, 90deg). -
<side-or-corner>– specifies the direction using keyword values (e.g., to top, to bottom, to right). -
<color-stop-list>– this is a comma-separated list of color stops. Each stop defines a color followed by a percentage (or length) indicating its position, where it should appear in the gradient (e.g., red 10%, green 50%, blue 80%).
-
Syntax:
background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop-list);
- repeating-radial-gradient() function:
-
<circle>or<ellipse>– specifies the visual shape effect of the gradient. -
<size>– defines the size of the gradient’s ending shape (e.g., farthest-corner, farthest-side, closest-corner, closest-side). -
<position>– defines the center of the gradient (e.g., top-left, top-center, top-right, etc). -
<color-stop-list>– this is a comma-separated list of color stops. Each stop defines a color followed by a percentage (or length) indicating its position, where it should appear in the gradient (e.g., red 10%, green 50%, blue 80%, etc).
-
Syntax:
background-image: repeating-radial-gradient(shape size at position, color-stop-list);
- repeating-conic-gradient() function:
- from
<angle>(optional) – indicates an angle to rotate the entire gradient. - at
<position>(optional) – specifies the center of the gradient. Defaults to center. position can be a single keyword value (left, right, top, bottom, center) or a combination of two keyword values . -
<color-stop-list>– this is a comma-separated list of color stops. Each stop consists of a color value and optionally an angle (in degrees) to define where the color transitions to.
- from
Syntax:
background-image: repeating-conic-gradient(from angle at position, color-stop-list);
Browser Compatibility
linear-gradient()
26,
12,
16,
12.1,
7
radial-gradient()
26,
12,
16,
12.1,
7
conic-gradient()
69,
79,
83,
56,
12.1
repeating-linear-gradient()
26,
12,
16,
12.1,
7
repeating-radial-gradient()
26,
12,
16,
12.1,
7
repeating-conic-gradient()
69,
79,
83,
56,
12.1
Browser Compatibility
repeating-linear-gradient()
linear-gradient()
26
12
16
12.1
7
repeating-linear-gradient()
26
12
16
12.1
7
repeating-linear-gradient()
26
12
16
12.1
7
repeating-linear-gradient()
26
12
16
12.1
7
repeating-linear-gradient()
26
12
16
12.1
7
repeating-linear-gradient()
26
12
16
12.1
7
Learning Resources
Available Courses:
Ad #3