The CSS gradient functions let you display smooth transitions between two or more colors within an element. CSS defines three types of gradients: The CSS gradient functions are used within the …

Dec 16, 2025 · You can choose between three types of gradients: linear (created with the linear-gradient () function), radial (created with the radial-gradient () function), and conic (created with the conic …

Your ultimate cheat sheet on gradients and how to use them to power up your designs.

Gradients are widely used in web design, graphics, applications, and art to add depth, volume, and dynamism. In this article, we'll discuss the different types of gradients, how they work, and where …

Color gradient A linear, or axial, color gradient In color science, a color gradient (also known as a color ramp or a color progression) specifies a range of position-dependent colors, usually used to fill a …

Jun 16, 2025 · In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an …

Jul 11, 2025 · Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.

Nov 16, 2020 · There are three types of repeating gradients, all three of which are currently supported in the official specification and one that is in the current working draft.

Types of CSS Gradients CSS defines three types of gradients Linear Gradient: Goes from left to right, up to down or diagonally. Radial Gradient: Start from center to edges. Conic Gradient: Revolve …

Dec 8, 2025 · There are three main types of gradients in CSS: 1. Linear Gradients. Linear gradients create a smooth transition of colors along a straight line. The basic syntax looks like this: direction: …