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.

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, ...

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

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

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 .

The CSS Gradient online generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format. Keep reading below to learn more about Linear Gradients, Radial Gradients, Repeating Gradients, Conic Gradients or Text Gradients.

CSS gradients are represented by the data type, a special type of made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic ...

.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 ·

Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites. With 1000+ gradients, it's easy to find the 👌 color!

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.

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.

It starts red, transitioning to ... Yourself » · More "Try it Yourself" examples below. The CSS linear-gradient() function creates a linear gradient as the background....

August 12, 2024 - CSS gradients are typically one color that fades into another, but CSS allows you to control every aspect of how that happens, from the direction and the shape to the colors and how they transition from one to another.

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.

January 11, 2022 - For example, here's a gradient that uses two very-similar colors: ... The colors are so similar that there's really no way for RGB interpolation to mess it up. So then: our sneaky trick is to generate a bunch of midpoint colors using a custom color mode, and pass them all to our CSS gradient function.

A Free Gallery of Fantastic and Unique CSS Gradients.

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

Learn how to create stunning CSS gradient patterns—from simple stripes to advanced zig zags. Explore examples, syntax tips, and techniques to level up your design.