As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

The CSS gradient functions let you display smooth transitions between two or more colors within an element.

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

.gradient { background-image: linear-gradient( 45deg, hsl(240deg 100% 20%) 0%, hsl(281deg 100% 21%) 8%, hsl(304deg 100% 23%) 17%, hsl(319deg 100% 30%) 25%, hsl(329deg 100% 36%) 33%, hsl(336deg 100% 41%) 42%, hsl(346deg 83% 51%) 50%, hsl(3deg 95% 61%) 58%, hsl(17deg 100% 59%) 67%, hsl(30deg 100% 55%) 75%, hsl(40deg 100% 50%) 83%, hsl(48deg 100% 50%) 92%, hsl(55deg 100% 50%) 100% ); } Copy URLCopy CSS ·

Browse 180 free CSS gradients for backgrounds, UI, websites, and design systems. Copy CSS code, explore color palettes, and find gradient inspiration fast.

Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support: Links to CSS gradients documentation: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, ...

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .

CSS gradients are a powerful tool in web design that allow you to create smooth transitions between two or more colors, resulting in visually appealing background effects.

Generate a nice color gradient. Just enter two colors and our tool generates a perfect color gradient and the fitting css code.

You can define the linear gradient angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to top, to left, and to right to determine where the line should move to from the starting point. These directional keywords can be combined-like to top right or to bottom left-to create a diagonal line. You could also use number and unit pairings to determine the angle and direction of the line. In the most basic version of a CSS gradients, you'll need is at least two colors for the gradient to transition between.

A smooth, infinitely-looping animated background built entirely with CSS — no JavaScript required. The gradient seamlessly transitions through vibrant ...

While linear gradients follow a single-line axis, radial gradients spread out in all directions. Their syntax is fairly similar to linear ones, as they both have color stops.

July 11, 2025 - CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs.

September 9, 2025 - Easily create beautiful CSS gradients for your Elementor website with our intuitive CSS Gradient Generator. Choose types, colors, angles & get instant code!

CSS gradients create smooth transitions between colors, offering a dynamic and lightweight alternative to images. They can enhance backgrounds, text, borders, and other design elements.

Gradients in CSS allow you to blend two or more colors smoothly. Instead of using a plain solid background color, you can create visually appealing transitions.

Mix Tailwind CSS Colors and generate stunning text and background gradients or use our ready-made gradients to create remarkable designs.

CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors. CSS defines three types of gradients The linear gradient creates a color band that flows in a single direction, i.e.

Method of defining a linear or radial color gradient as a CSS image.

August 12, 2014 - Gradients are often used to emulate the effect of light from above on colored surfaces. CSS gradients come in two variants: Linear gradients and radial gradients. Linear gradients change color in a linear fashion.