Sunset
Warm orange and peach for hero sections and buttons.
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Ocean
Calm blue that suits finance, travel and health pages.
background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
Night sky
Deep blue-green for dark headers.
background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
Mint
Fresh green to light blue.
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
Peach
Soft background for cards and forms.
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
Royal
Blue to violet, popular for app landing pages.
background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
Lime
Spring green for environment and food.
background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
Rose
Pink to coral, bold and playful.
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
Steel
Grey to slate for business sites.
background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
Gold
Amber to yellow for highlights.
background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
Plum
Muted purple for dark interfaces.
background: linear-gradient(135deg, #614385 0%, #516395 100%);
Aurora
Cyan to green glow.
background: linear-gradient(120deg, #00c9ff 0%, #92fe9d 100%);
Spotlight
A light spot in the corner of a blue field.
background: radial-gradient(circle at 30% 20%, #ffffff 0%, #5b8def 100%);
Vignette
Dark vignette for photo overlays.
background: radial-gradient(ellipse at center, #3a3a3a 0%, #0b0b0b 100%);
Sun glow
A sun on the horizon.
background: radial-gradient(circle at 50% 100%, #ffd200 0%, #f7971e 35%, #2b1055 100%);
Colour wheel
Full hue circle.
background: conic-gradient(from 0deg at 50% 50%, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
Pie 35 percent
A simple pie chart with a hard edge.
background: conic-gradient(#1b2a49 0 35%, #f4b400 35% 100%);
Stripes
Diagonal warning stripes, no image needed.
background: repeating-linear-gradient(45deg, #f4b400 0 10px, #1b2a49 10px 20px);
Photo fade
Dark fade at the bottom of a photo so white text is readable.
background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
Half and half
Hard stop: two flat colours side by side.
background: linear-gradient(90deg, #f4b400 50%, #1b2a49 50%);
CSS Lab