Linear CSS Gradient
#0f172a · #2563eb · #22d3ee
linear-gradient(135deg, #0f172a 8%, #2563eb 50%, #22d3ee 92%)
CSS gradient generator
CSS gradient generator with copyable linear and radial examples
Start with a CSS gradient example, copy the code, or open Gradient Crafter to adjust color stops, direction, shape, and export format.
Copy CSS gradient snippets
A CSS gradient is rendered by the browser, so it can scale cleanly for responsive layouts without uploading a separate raster background.
Radial CSS Gradient
#020617 · #7c3aed · #f0abfc
radial-gradient(circle at 50% 44%, #7c3aed 0%, transparent 44%), radial-gradient(circle at 20% 78%, #020617 0%, transparent 44%), radial-gradient(circle at 82% 18%, #f0abfc 0%, transparent 44%), linear-gradient(135deg, #020617, #07070d)
Button Gradient
#ff6a1f · #ef4444 · #facc15
linear-gradient(110deg, #ff6a1f 18%, #ef4444 50%, #facc15 82%)
Card Surface Gradient
#111827 · #475569 · #67e8f9
linear-gradient(135deg, #111827 8%, #475569 50%, #67e8f9 92%)
Hero Background Gradient
#030712 · #1d4ed8 · #f9a8d4
linear-gradient(125deg, #030712 11%, #1d4ed8 50%, #f9a8d4 89%)
Muted App Gradient
#f8fafc · #cbd5e1 · #60a5fa
linear-gradient(120deg, #f8fafc 14%, #cbd5e1 50%, #60a5fa 86%)
Common CSS gradient patterns
background: linear-gradient(135deg, #0f172a, #2563eb, #22d3ee);
background: radial-gradient(circle at 50% 40%, #7c3aed, #020617 72%);