Metallic Gold Sweep
#78350f · #f59e0b · #fde68a
linear-gradient(135deg, #78350f 8%, #f59e0b 50%, #fde68a 92%)
Gradient gallery
Gold Gradient: CSS gradients, backgrounds, and downloadable images
Gold gradients create a polished, premium signal when they balance warm amber, soft yellow, and darker bronze tones. The best gold gradients avoid flat yellow and use contrast to suggest depth.
Ready-to-use gold gradient examples
Use gold gradients for launch banners, certificates, pricing moments, and premium badges. Pair gold with black, ivory, navy, or deep green for stronger contrast.
Champagne Highlight
#fff7ed · #facc15 · #b45309
linear-gradient(120deg, #fff7ed 14%, #facc15 50%, #b45309 86%)
Award Ribbon
#451a03 · #d97706 · #fef3c7
linear-gradient(145deg, #451a03 11%, #d97706 50%, #fef3c7 89%)
Soft Luxury Gold
#fef9c3 · #fbbf24 · #92400e
linear-gradient(132deg, #fef9c3 8%, #fbbf24 50%, #92400e 92%)
Amber Product Glow
#1f1300 · #f59e0b · #fff7ad
linear-gradient(115deg, #1f1300 16%, #f59e0b 50%, #fff7ad 84%)
Golden Hour
#7c2d12 · #fb923c · #fef08a
linear-gradient(118deg, #7c2d12 15%, #fb923c 50%, #fef08a 85%)
Bronze Foil
#29160a · #a16207 · #fde68a
linear-gradient(130deg, #29160a 8%, #a16207 50%, #fde68a 92%)
Cream Gold Card
#fffbeb · #fcd34d · #d97706
linear-gradient(140deg, #fffbeb 8%, #fcd34d 50%, #d97706 92%)
Golden Halo Radial
#1f1300 · #f59e0b · #fef3c7
radial-gradient(circle at 18% 78%, #1f1300 0%, transparent 44%), radial-gradient(circle at 52% 44%, #f59e0b 0%, transparent 44%), radial-gradient(circle at 82% 20%, #fef3c7 0%, transparent 44%), linear-gradient(135deg, #1f1300, #07070d)
Champagne Glow Radial
#451a03 · #fbbf24 · #fff7ad
radial-gradient(circle at 22% 24%, #451a03 0%, transparent 44%), radial-gradient(circle at 56% 54%, #fbbf24 0%, transparent 44%), radial-gradient(circle at 84% 78%, #fff7ad 0%, transparent 44%), linear-gradient(135deg, #451a03, #07070d)