CSS Gradient Generator
This CSS gradient generator is a web-based tool that allows users to create custom gradient backgrounds for their websites or web applications. With this generator it will simplify the process of generating CSS code for gradients, eliminating the need for manual coding. Users can customize the gradient by selecting colors, defining gradient direction, adjusting color stops, and fine-tuning various properties. Once the desired gradient is created, the generator provides the corresponding CSS code, which can be easily copied and pasted into the user's stylesheet. This tool is particularly helpful for designers and developers looking to enhance the visual appeal of their websites with stylish and dynamic background gradients without the need for in-depth CSS knowledge.
If you're finding it hard to know where to start, then just select one of our preset colors to see the resulting gradient.
Don't forget to check out our CSS Text Gradient Generator.
Update This generator has been updated to also output Tailwind CSS.
Gradient Options
-
Orientation
-
Size
-
Position
-
Position
Color Options
-
Start Color0%
-
End Color100%
Preview
Choose either the utility class for quick use or the config option for production projects.
Utility class
Tailwind config
<div class="bg-custom_gradient"></div>Gradient Examples (click to experiment with)
About CSS Gradients
The days when it was possible to make a gradient on a website only using pictures are long gone. It is now easy enough to create gradients inside CSS styles.
To set the gradient, we use the CSS property background-image or an abbreviated version of background-image. We can create both linear and radial gradients by using either linear-gradient or radial-gradient functions and specifying the start and end colors. Here's an example syntax:
background: linear-gradient(#23EC05, #D712C5);It is also possible to change the direction by specifying it first, before the first color. Options are: to top left, to top, to top right, to right, to bottom right, to bottom, to bottom left and to left.
background: linear-gradient(to right, #0cbaba, #380036);If you replace this parameter with to top right you will get a diagonal gradient. The same effect can be created by specifying a parameter in degrees, for example, 45deg.
You can also use more than 2 colors, colors values can be specified in HEX, RGB, RGBA, HSL, HSLA and color name.
background: linear-gradient(to right, #0cbaba, #380036, darksalmon);Each of the colors specified will take up an equal amount of available space, giving us a smooth and balanced gradient.
If we want one color to take up more space than another, we can add a percentage value immediately after the color. Practice with the css gradient generator above to see how this alters the gradients.
background: linear-gradient(to right, #0cbaba 50%, #380036, darksalmon);Radial Gradients
Let's use everything we've learned so far to create a radial gradient. In fact, it is quite simple, it is enough to specify the value at the beginning radial-gradient.
background: radial-gradient(#23EC05, #D712C5);This radial gradient takes the shape of the parent block, so instead of a circle, we get an ellipse. For the gradient to be in the shape of a circle, regardless of the proportions of the parent, the keyword circle must be specified.
background: radial-gradient(circle, #23EC05, #D712C5);In addition, we can specify where the center of the radial gradient will be. Let's make it in .the upper left corner:
background: radial-gradient(circle at top left, #23EC05, #D712C5);Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, generated entirely by the browser without needing an image file.
Gradients are applied using the background or background-image property and are defined using functions such as linear-gradient(), radial-gradient(), or conic-gradient().
Because they are pure CSS, gradients scale perfectly at any resolution and add no extra HTTP requests to your page.
What is the difference between a linear and a radial gradient?
A linear-gradient() transitions colors along a straight line in a direction you specify - top to bottom, left to right, or any angle in degrees.
A radial-gradient() radiates outward from a central point, producing a circular or elliptical spread of color.
Use linear gradients for backgrounds, buttons, and banners where a directional sweep is needed.
Use radial gradients for spotlight effects, glows, or anywhere you want color to emanate from a focal point.
How do I change the direction of a linear gradient?
Add a direction keyword or angle as the first argument to linear-gradient(), before your first color.
Direction keywords use the format to top, to right, to bottom left, and so on.
Alternatively, specify an angle in degrees - 0deg points upward, 90deg points to the right, and 45deg produces a diagonal.
For example: background: linear-gradient(to right, #0cbaba, #380036);
How do I add more than two colors to a CSS gradient?
Simply add more color values as additional comma-separated arguments after the optional direction.
For example: background: linear-gradient(to right, #0cbaba, #380036, darksalmon);
Each color will occupy an equal share of the gradient by default. To control how much space a color takes up, add a percentage immediately after it - for example #0cbaba 50% - which is called a color stop.
Color values can be in HEX, RGB, RGBA, HSL, HSLA, or named color format.
What is a color stop in a CSS gradient?
A color stop is a point along the gradient where a specific color is defined. By default, colors are spread evenly, but you can override this by placing a percentage or length value after any color.
For example, linear-gradient(to right, red 20%, blue 80%) means red dominates the first 20% of the element, blue dominates from 80% onward, and the transition between them is compressed into the middle section.
Color stops give you precise control over where transitions happen and how abrupt or gradual they appear.
How do I make a radial gradient circular instead of elliptical?
By default, radial-gradient() takes the shape of its container element, which produces an ellipse if the element is not square.
To force a circle regardless of the element's proportions, add the circle keyword as the first argument:
background: radial-gradient(circle, #23EC05, #D712C5);
You can also combine this with a position to control where the center of the circle sits, for example: radial-gradient(circle at top left, #23EC05, #D712C5);
How do I create a repeating gradient in CSS?
Use repeating-linear-gradient() or repeating-radial-gradient() instead of the standard versions.
These functions tile the gradient pattern continuously across the element.
The key is to define explicit color stop positions so the browser knows the size of one "tile" - for example: background: repeating-linear-gradient(45deg, #f06, #f06 10px, #fff 10px, #fff 20px); produces diagonal stripes 10px wide.
Without explicit stops, repeating gradients may produce unexpected results.
How do I add transparency to a CSS gradient?
Use rgba() or hsla() color values, or the keyword transparent, as any of your color stops.
For example, background: linear-gradient(to right, rgba(0,0,0,0.8), transparent); fades from a semi-opaque black to fully transparent.
This is commonly used for overlays on top of images to ensure text remains readable without completely hiding the background.
Note that gradients to transparent can look grey in some browsers because transparent is treated as rgba(0,0,0,0) - fading through black. To avoid this, fade to rgba(r,g,b,0) using the same base color instead.
Do I need vendor prefixes for CSS gradients?
For all modern browsers - Chrome, Firefox, Safari, Edge - no vendor prefixes are needed. The standard linear-gradient() and radial-gradient() syntax is fully supported.
The -webkit- prefix was required for older versions of Chrome and Safari (pre-2013) and is occasionally still included for very broad compatibility.
If you need to support legacy browsers or are unsure, this generator includes an option to output vendor-prefixed CSS alongside the standard code.
Can I use a CSS gradient as a text color?
Yes, though it requires a small workaround since color does not accept gradients directly.
Apply the gradient to background-image, then set -webkit-background-clip: text and -webkit-text-fill-color: transparent (or the standard background-clip: text and color: transparent).
This clips the background to the shape of the text, making the gradient visible through the letters.
Check out the CSS Text Gradient Generator on this site for a dedicated tool that handles this automatically.
Can I animate a CSS gradient?
CSS gradients cannot be animated directly with transition because browsers do not interpolate between gradient values.
The most common workaround is to animate background-position on an oversized gradient - for example, doubling the gradient size with background-size: 200% and then shifting the position with a CSS animation, which creates the illusion of a moving gradient.
Alternatively, opacity transitions on layered pseudo-elements can produce a fade between two gradient states.