default (to bottom) linear-gradient(red, blue) | to top linear-gradient(to top, red, blue) | to right linear-gradient(to right, red, blue) | 45deg linear-gradient(45deg, red, blue) |
3 stops linear-gradient(to right, red, yellow, blue) | abs lengths linear-gradient(to right, red 0, yellow 40px, blue 80px) | hard stop linear-gradient(to right, red 0 50%, blue 50% 100%) | color hint linear-gradient(to right, red, 30%, blue) |
transparent → color linear-gradient(to right, rgba(255,0,0,0), red) | color → transparent linear-gradient(to right, rgba(0,128,255,1), rgba(0,128,255,0)) | rgba() 80% opacity linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.8)) | multi-stop alpha linear-gradient(to right, red, rgba(255,255,0,0.5), rgba(0,0,255,0)) |
stripes 20px repeating-linear-gradient(to right, red 0 10px, blue 10px 20px) | 45deg stripes repeating-linear-gradient(45deg, red 0 8px, white 8px 16px) | fade repeat repeating-linear-gradient(to right, red 0, blue 30px) | full span = no repeat repeating-linear-gradient(to right, red, blue) |
default (ellipse center) radial-gradient(red, blue) | circle radial-gradient(circle, red, blue) | at 25% 25% radial-gradient(at 25% 25%, red, blue) | circle at 50% 25% radial-gradient(circle at 50% 25%, yellow, orange, red) |
farthest-corner radial-gradient(farthest-corner at 30% 30%, red, blue) | closest-side radial-gradient(closest-side at 30% 30%, red, blue) | farthest-side radial-gradient(farthest-side at 30% 30%, red, blue) | explicit 30px radial-gradient(30px at center, red, blue) |
transparent center radial-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) | spotlight radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0)) | sunset radial-gradient(circle, #fff7e6, #ff6b35, #1a1a2e) | multi-stop alpha radial-gradient(circle, rgba(255,0,0,1), rgba(255,255,0,0.5), rgba(0,0,255,0)) |
rings repeating-radial-gradient(circle, red 0 10px, blue 10px 20px) | fade rings repeating-radial-gradient(circle, red 0, blue 25px) | ellipse rings repeating-radial-gradient(red 0 8px, white 8px 16px) | with alpha repeating-radial-gradient(circle, rgba(255,0,0,0.8) 0 10px, rgba(0,0,255,0.8) 10px 20px) |
default conic-gradient(red, blue) | 3 stops conic-gradient(red, yellow, blue) | from 90deg conic-gradient(from 90deg, red, blue) | at 25% 75% conic-gradient(at 25% 75%, red, green, blue) |
angle stops conic-gradient(red 0deg, blue 180deg, green 360deg) | percent stops conic-gradient(red 0%, blue 50%, green 100%) | hard stop conic-gradient(red 0 90deg, blue 90deg 180deg, green 180deg 360deg) | pie chart conic-gradient(#e74c3c 0 25%, #3498db 25% 65%, #2ecc71 65% 100%) |
with alpha conic-gradient(rgba(255,0,0,0), red) | from 45deg at 30% 70% conic-gradient(from 45deg at 30% 70%, red, blue) | color wheel conic-gradient(red, yellow, lime, cyan, blue, magenta, red) | starburst conic-gradient(gold 0 10%, white 10% 20%, gold 20% 30%, white 30% 40%, gold 40% 50%, white 50% 60%, gold 60% 70%, white 70% 80%, gold 80% 90%, white 90% 100%) |
60deg tile repeating-conic-gradient(red 0deg 30deg, blue 30deg 60deg) | from 45deg repeating-conic-gradient(from 45deg, red 0deg, blue 60deg) | checkerboard-like repeating-conic-gradient(#000 0 25%, #fff 25% 50%) | narrow slice repeating-conic-gradient(red 0 5deg, blue 5deg 10deg) |
sRGB red→blue linear-gradient(to right, red, blue) | oklab red→blue linear-gradient(in oklab to right, red, blue) | oklab red→green linear-gradient(in oklab to right, red, green) | oklab red→yellow→blue linear-gradient(in oklab to right, red, yellow, blue) |
hsl shorter red→blue linear-gradient(in hsl, red, blue) | hsl longer red→blue linear-gradient(in hsl longer hue, red, blue) | oklch shorter red→blue linear-gradient(in oklch, red, blue) | oklch longer red→blue linear-gradient(in oklch longer hue, red, blue) |
lab red→blue linear-gradient(in lab to right, red, blue) | lch red→blue linear-gradient(in lch to right, red, blue) | srgb-linear red→blue linear-gradient(in srgb-linear to right, red, blue) | display-p3 red→blue linear-gradient(in display-p3 to right, red, blue) |
radial oklab radial-gradient(in oklab circle, red, blue) | radial oklch radial-gradient(in oklch circle, red, blue) | conic oklab conic-gradient(in oklab, red, blue) | conic oklch longer conic-gradient(in oklch longer hue, red, blue) |