CSS Gradient Generator

Pick two colours, choose the direction and copy the CSS instantly — linear or radial. Below: ready-made gradients for every colour.

To make a CSS gradient, blend two colours with linear-gradient() — e.g. background: linear-gradient(90deg, #6A8CAE, #8E30B0);. Pick your colours and angle below and copy the code, or open a colour for ready-made gradients.

Generator
Colours
Type
Angle 90°
Gradients by colour
Red Orange Yellow Green Blue Purple Pink Brown Grey White Black Teal Navy Beige Gold Maroon Violet Lavender Magenta Indigo Turquoise Cyan Peach Coral Tan Taupe Khaki Olive Sage Mint Emerald Lime Cream Amber Copper Rose Crimson Sapphire Azure Jade Silver Charcoal Burgundy Wine Ruby Raspberry Mauve Plum Eggplant Lilac Periwinkle Blush Salmon Terracotta Rust Sienna Mahogany Ginger Bronze Mustard Ochre Champagne Greige Chartreuse Aquamarine Cerulean Cobalt
More gradient colours
Forest Green Dark Green Light Green Dark Blue Light Blue Sky Blue Royal Blue Dark Red Dark Purple Deep Purple Light Purple Light Pink Hot Pink Dark Pink Dark Brown Light Brown Dark Grey Light Grey Light Yellow Olive Green Mint Green Emerald Green Slate Blue Dusty Pink Rose Gold Burnt Orange Hunter Green Sea Green Seafoam Tiffany Blue Steel Blue Dusty Blue Blue Grey Ocean Blue Denim Midnight Blue Army Green Dark Cyan Ash Pastel Green
Built by DSGN.HOUSE Updated 2026

Our color tools run on our own catalogue of 26,000+ real paint colors across 16 brands — Benjamin Moore, Sherwin-Williams, Behr, Dulux, RAL and more — with the color math (HSL and CIELAB matching) computed in-house, not scraped from summaries. Every color you pick maps to a real, buyable paint with its code, so what you see here you can actually take to the store. We review and update these tools and their data regularly.

Created by Denis Kataev, founder of DSGN.HOUSE — a software engineer and digital entrepreneur building professional color-design tools for everyone.

FAQ
How do I make a CSS gradient?+

Use linear-gradient() with two or more colours: background: linear-gradient(90deg, #6A8CAE, #8E30B0);. Pick your colours and angle in the generator above and copy the CSS.

What's the difference between linear and radial gradients?+

A linear gradient blends colours along a straight line (set by the angle); a radial gradient blends outward from a centre point in a circle. Toggle between them in the generator.

How do I copy the gradient CSS?+

Hit “Copy CSS” in the generator, or “Copy” on any ready-made gradient. Paste it straight into your background property.

Can I use these gradients as backgrounds or wallpapers?+

Yes — gradients work as website, app and phone-wallpaper backgrounds. Copy the CSS, or open a colour for ready-made background gradients.