# CSS Gradient Function Tests

## linear-gradient()

Default direction`linear-gradient(red, blue)`
Keyword direction`linear-gradient(to right, red, yellow, blue)`
Corner direction`linear-gradient(to bottom right, red, yellow, blue)`
Angle in degrees`linear-gradient(45deg, red, yellow, lime, cyan, blue)`
Negative angle`linear-gradient(-30deg, #ff3366, #6633ff)`
Angle in turns`linear-gradient(0.25turn, red, orange, yellow, green, blue)`
Percentage stops`linear-gradient(to right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%)`
Length stops`linear-gradient(to right, red 0px, yellow 45px, green 90px, blue 150px)`
Hard color bands / multi-position stops`linear-gradient(to right, red 0 25%, white 25% 50%, blue 50% 75%, black 75% 100%)`
Out-of-order / overlapping stops`linear-gradient(to right, red 40%, yellow 20%, blue 80%)`
Alpha over fallback color`linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)), #1e90ff`
Multiple backgrounds + background-size`linear-gradient(...), linear-gradient(...); background-size: 40px 40px, auto`

## repeating-linear-gradient()

Basic repeating bands`repeating-linear-gradient(red 0 10px, blue 10px 20px)`
Diagonal repeating bands`repeating-linear-gradient(45deg, red 0 8px, yellow 8px 16px, blue 16px 24px)`
Keyword direction`repeating-linear-gradient(to right, #111 0 10px, #eee 10px 20px)`
Very thin lines`repeating-linear-gradient(to bottom, black 0 1px, white 1px 2px)`
Soft repeating transitions`repeating-linear-gradient(90deg, red 0px, yellow 18px, blue 36px)`
Mixed hard/soft ranges`repeating-linear-gradient(135deg, #ff3366 0 12px, #ffd166 12px 18px, #06d6a0 18px 36px)`
Transparent stripes over color`repeating-linear-gradient(45deg, rgba(...), transparent), #304060`
Short repeat period`repeating-linear-gradient(30deg, red 0 3px, blue 3px 6px)`
Long repeat period`repeating-linear-gradient(30deg, red 0 30px, yellow 30px 60px, blue 60px 90px)`
Repeating layer + background-size`repeating-linear-gradient(...), linear-gradient(...); background-size: 48px 48px, auto`

## radial-gradient()

Default radial gradient`radial-gradient(red, blue)`
Circle shape`radial-gradient(circle, red, yellow, blue)`
Ellipse shape`radial-gradient(ellipse, red, yellow, blue)`
Explicit center position`radial-gradient(circle at center, red 0%, yellow 35%, blue 100%)`
Position at corner`radial-gradient(circle at top left, red, yellow, blue)`
Position using lengths`radial-gradient(circle at 40px 70px, red, yellow 35%, blue)`
closest-side size`radial-gradient(circle closest-side at 70% 35%, red, yellow, blue)`
farthest-side size`radial-gradient(circle farthest-side at 70% 35%, red, yellow, blue)`
closest-corner size`radial-gradient(circle closest-corner at 70% 35%, red, yellow, blue)`
farthest-corner size`radial-gradient(circle farthest-corner at 70% 35%, red, yellow, blue)`
Explicit ellipse radii`radial-gradient(80px 45px at 50% 50%, red, yellow, blue)`
Hard radial bands`radial-gradient(circle, red 0 25%, white 25% 50%, blue 50% 75%, black 75% 100%)`
Transparent fade over color`radial-gradient(circle at center, rgba(...), rgba(...,0) 55%), #1e5a7a`
Multiple radial layers`radial-gradient(...), radial-gradient(...), linear-gradient(...)`
Radial tile using background-size`radial-gradient(...), #222; background-size: 64px 64px`