CSS Gradient Function Tests

linear-gradient()

Default directionlinear-gradient(red, blue)

Keyword directionlinear-gradient(to right, red, yellow, blue)

Corner directionlinear-gradient(to bottom right, red, yellow, blue)

Angle in degreeslinear-gradient(45deg, red, yellow, lime, cyan, blue)

Negative anglelinear-gradient(-30deg, #ff3366, #6633ff)

Angle in turnslinear-gradient(0.25turn, red, orange, yellow, green, blue)

Percentage stopslinear-gradient(to right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%)

Length stopslinear-gradient(to right, red 0px, yellow 45px, green 90px, blue 150px)

Hard color bands / multi-position stopslinear-gradient(to right, red 0 25%, white 25% 50%, blue 50% 75%, black 75% 100%)

Out-of-order / overlapping stopslinear-gradient(to right, red 40%, yellow 20%, blue 80%)

Alpha over fallback colorlinear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)), #1e90ff

Multiple backgrounds + background-sizelinear-gradient(...), linear-gradient(...); background-size: 40px 40px, auto

Basic repeating bandsrepeating-linear-gradient(red 0 10px, blue 10px 20px)

Diagonal repeating bandsrepeating-linear-gradient(45deg, red 0 8px, yellow 8px 16px, blue 16px 24px)

Keyword directionrepeating-linear-gradient(to right, #111 0 10px, #eee 10px 20px)

Very thin linesrepeating-linear-gradient(to bottom, black 0 1px, white 1px 2px)

Soft repeating transitionsrepeating-linear-gradient(90deg, red 0px, yellow 18px, blue 36px)

Mixed hard/soft rangesrepeating-linear-gradient(135deg, #ff3366 0 12px, #ffd166 12px 18px, #06d6a0 18px 36px)

Transparent stripes over colorrepeating-linear-gradient(45deg, rgba(...), transparent), #304060

Short repeat periodrepeating-linear-gradient(30deg, red 0 3px, blue 3px 6px)

Long repeat periodrepeating-linear-gradient(30deg, red 0 30px, yellow 30px 60px, blue 60px 90px)

Repeating layer + background-sizerepeating-linear-gradient(...), linear-gradient(...); background-size: 48px 48px, auto

Default radial gradientradial-gradient(red, blue)

Circle shaperadial-gradient(circle, red, yellow, blue)

Ellipse shaperadial-gradient(ellipse, red, yellow, blue)

Explicit center positionradial-gradient(circle at center, red 0%, yellow 35%, blue 100%)

Position at cornerradial-gradient(circle at top left, red, yellow, blue)

Position using lengthsradial-gradient(circle at 40px 70px, red, yellow 35%, blue)

closest-side sizeradial-gradient(circle closest-side at 70% 35%, red, yellow, blue)

farthest-side sizeradial-gradient(circle farthest-side at 70% 35%, red, yellow, blue)

closest-corner sizeradial-gradient(circle closest-corner at 70% 35%, red, yellow, blue)

farthest-corner sizeradial-gradient(circle farthest-corner at 70% 35%, red, yellow, blue)

Explicit ellipse radiiradial-gradient(80px 45px at 50% 50%, red, yellow, blue)

Hard radial bandsradial-gradient(circle, red 0 25%, white 25% 50%, blue 50% 75%, black 75% 100%)

Transparent fade over colorradial-gradient(circle at center, rgba(...), rgba(...,0) 55%), #1e5a7a

Multiple radial layersradial-gradient(...), radial-gradient(...), linear-gradient(...)

Radial tile using background-sizeradial-gradient(...), #222; background-size: 64px 64px