Gradient Generator

Create beautiful CSS gradients — click any swatch to pick a color

Linear Gradient · 2 stops
Gradient Settings
90°
Color Stops
2 / 10
%
%
Generated CSS
/* CSS */
background: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
Quick Copy

Related Tools

Mesh Gradient Maker
Create mesh gradients
Aura Gradient Maker
Glowing aura effects
Color Blender
Smooth color transitions
Color Mixer
Blend with custom ratios
Contrast Checker
Accessibility checker
Browse Gradients
Explore gradient library

CSS Gradient Generator: Create Beautiful Web Gradients

Design linear, radial, and conic gradients with multiple color stops, custom directions, and professional effects. Get production-ready CSS code instantly.

How it works

Click any color swatch to open the color picker. Adjust positions and angle. Copy the generated CSS directly into your project — supports background and background-image formats.