◐

Gradient Generator

Create CSS linear and radial gradients visually. Copy ready-to-use CSS background code instantly.

Type

Angle: 135°

Color Stops

#6366f10%

#ec4899100%

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

How to Use

Choose your gradient type — linear (direction-based, from top/bottom/left/right or any angle) or radial (circle/ellipse from center). Pick your start and end colors using the color pickers.
Fine-tune the gradient using the angle slider for linear gradients, or position/radius controls for radial gradients. Add intermediate color stops to create multi-color gradients with smooth transitions.
Copy the generated CSS code with one click. You get a complete `background` or `background-image` declaration with vendor prefixes. Paste it directly into your stylesheet — no additional setup needed.

What's the difference between linear and radial gradients?: A linear gradient transitions colors along a straight line in any specified direction (top to bottom, left to right, or any angle). A radial gradient radiates outward from a center point in a circular or elliptical pattern. Linear gradients are great for headers and banners; radial gradients work well for spotlight effects and badges.
Can I create gradients with more than 2 colors?: Yes — add as many color stops as you need. Each stop can be positioned at a precise percentage along the gradient. This lets you create rainbow gradients, sunset effects, or brand palettes with sharp or smooth color transitions.
Are CSS gradients supported in all browsers?: CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The generated code includes standard syntax that covers 98%+ of global browser usage. For very old browsers, you can set a solid fallback background color.