Gradient backgrounds

Gradient backgrounds for websites, apps, and product mockups

Use these gradient backgrounds as full-page CSS, downloadable images, or starting palettes for Gradient Crafter.

Downloadable gradient background images

For readable hero sections, place text on the darker third of the background or add a subtle overlay before exporting.

#020617 · #1d4ed8 · #22d3ee

linear-gradient(135deg, #020617 8%, #1d4ed8 50%, #22d3ee 92%)

#3f1d05 · #f59e0b · #fef3c7

linear-gradient(128deg, #3f1d05 10%, #f59e0b 50%, #fef3c7 90%)

#fff1f2 · #f9a8d4 · #8b5cf6

linear-gradient(132deg, #fff1f2 8%, #f9a8d4 50%, #8b5cf6 92%)

#022c22 · #059669 · #d9f99d

linear-gradient(140deg, #022c22 8%, #059669 50%, #d9f99d 92%)

#000000 · #111827 · #f59e0b

linear-gradient(126deg, #000000 11%, #111827 50%, #f59e0b 89%)

#020617 · #6d28d9 · #38bdf8

linear-gradient(135deg, #020617 8%, #6d28d9 50%, #38bdf8 92%)

#450a0a · #dc2626 · #fb923c

linear-gradient(118deg, #450a0a 15%, #dc2626 50%, #fb923c 85%)

#f8fafc · #bae6fd · #fbcfe8

linear-gradient(128deg, #f8fafc 10%, #bae6fd 50%, #fbcfe8 90%)