Design Utilities

CSS Gradient Generator

Create beautiful, custom CSS gradients for your next web project. Adjust colors, angles, and types, then copy the cross-browser CSS code instantly.

Settings

Color 1

Color 2

Gradient Type

Angle90°

CSS Code

background: #4f46e5; /* fallback for old browsers */
background: -webkit-linear-gradient(90deg, #4f46e5, #ec4899);
background: linear-gradient(90deg, #4f46e5, #ec4899);

What are CSS Gradients?

CSS gradients let you display smooth transitions between two or more specified colors. They are highly performant because they are generated by the browser, meaning you don't need to load heavy image files to achieve beautiful background effects.

Linear Gradients

Transitions colors along a straight line. You can control the direction using angles (like 90deg for left-to-right) or keywords (like 'to bottom right').

Radial Gradients

Transitions colors radiating outwards from a central point. Perfect for creating subtle glowing effects or spotlight backgrounds.