Linear Gradient

Linear Gradient Generator

Create smooth color transitions along a straight line

Export Code

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Preset Gradients

What is a Linear Gradient?

Linear gradients create smooth color transitions along a straight line—the most fundamental and widely-used gradient type in CSS. From subtle backgrounds to bold hero sections, linear gradients add depth and visual interest without images.

The gradient flows along an axis you define: top to bottom (default), left to right, diagonal, or any angle you specify. Colors blend seamlessly along this path, with optional stops controlling exactly where each color appears.

Why Use Linear Gradients?

Linear gradients dominate web design for good reason. They load instantly (unlike background images), scale perfectly to any size, and animate smoothly. Performance-wise, they're rendered by the GPU, keeping your pages fast.

Beyond performance, linear gradients offer creative flexibility. Create depth with subtle gray transitions. Build brand identity with signature color blends. Add visual hierarchy by drawing attention to specific sections.

How It Works

The CSS syntax follows a logical pattern:

background: linear-gradient(direction, color1, color2, ...);

Direction can be keywords (to right, to bottom left) or angles (45deg, 180deg). Colors can include stops: red 0%, blue 50%, green 100%. Without stops, colors distribute evenly.

Our generator handles the syntax complexity. Adjust visually, and copy production-ready CSS.