DevToolKit

CSS Gradient Generator

Build linear gradients visually. Pick colors, set direction, and copy the CSS.

Live Preview
Preview
Color Stops
Presets
Direction
Generated CSS
background: linear-gradient(to right, #6366f1, #ec4899);
background: -webkit-linear-gradient(to right, #6366f1, #ec4899);

Related Tools

Color ConverterSVG OptimizerTailwind ConverterMeta Tag Generator

What is a CSS Gradient?

CSS gradients let you display smooth transitions between two or more colors without using image files. A linear-gradient transitions along a straight line in a specified direction or angle. They are supported in all modern browsers and are used extensively for backgrounds, buttons, hero sections, and decorative elements.

Types of CSS Gradients

Linear gradients go in a straight line. Radial gradients radiate outward from a center point. Conic gradients rotate around a center. This tool focuses on linear gradients, the most commonly used type in UI design.