CSS list-style-image Test Page

1 — URL image (graceful fallback when missing)

A missing URL should produce no marker and no crash. The list items are still indented normally.

  • Item one
  • Item two
  • Item three
missing URL
list-style-image: url('nonexistent.png');
  • Item one
  • Item two
  • Item three
none (baseline)
list-style-image: none;
  • Item one
  • Item two
  • Item three
disc (no image)
list-style-type: disc;
  • Item one
  • Item two
  • Item three
decimal (no image)
list-style-type: decimal;

2 — linear-gradient markers

Each list item marker is a gradient-filled square, sized to the current font height.

  • Item one
  • Item two
  • Item three
to right red→blue
list-style-image: linear-gradient(to right, red, blue);
  • Item one
  • Item two
  • Item three
to bottom green→yellow
list-style-image: linear-gradient(to bottom, green, yellow);
  • Item one
  • Item two
  • Item three
45deg multi-stop
list-style-image: linear-gradient(45deg, red, yellow, blue);
  • Item one
  • Item two
  • Item three
hard-stop stripes
list-style-image: linear-gradient(to right, red 50%, blue 50%);

3 — radial-gradient markers

  • Item one
  • Item two
  • Item three
circle center
list-style-image: radial-gradient(circle, white, navy);
  • Item one
  • Item two
  • Item three
ellipse default
list-style-image: radial-gradient(red, blue);
  • Item one
  • Item two
  • Item three
at 30% 30%
list-style-image: radial-gradient(circle at 30% 30%, yellow, orange, red);
  • Item one
  • Item two
  • Item three
closest-side
list-style-image: radial-gradient(closest-side circle at 50% 50%, lime, teal);

4 — conic-gradient markers

  • Item one
  • Item two
  • Item three
default sweep
list-style-image: conic-gradient(red, blue);
  • Item one
  • Item two
  • Item three
pie chart
list-style-image: conic-gradient(#e74c3c 0 25%, #3498db 25% 65%, #2ecc71 65% 100%);
  • Item one
  • Item two
  • Item three
from 90deg
list-style-image: conic-gradient(from 90deg, red, yellow, blue);
  • Item one
  • Item two
  • Item three
color wheel
list-style-image: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

5 — list-style shorthand with gradient

A single list-style shorthand value setting both position and image.

  • Item one
  • Item two
  • Item three
inside linear
list-style: inside linear-gradient(to right, purple, orange);
  • Item one
  • Item two
  • Item three
inside radial
list-style: inside radial-gradient(circle, gold, crimson);
  • Item one
  • Item two
  • Item three
inside conic
list-style: inside conic-gradient(red 0 33%, blue 33% 66%, green 66% 100%);
  • Item one
  • Item two
  • Item three
outside linear
list-style: outside linear-gradient(45deg, teal, pink);

6 — Gradient marker alongside typed bullets

Left column uses a gradient list-style-image; right uses list-style-type only. Neither should interfere.

  • Item one
  • Item two
  • Item three
gradient image
list-style-image: linear-gradient(to right, red, blue);
  • Item one
  • Item two
  • Item three
disc (no image)
list-style-type: disc; list-style-image: none;
  • Item one
  • Item two
  • Item three
circle (no image)
list-style-type: circle; list-style-image: none;
  • Item one
  • Item two
  • Item three
square (no image)
list-style-type: square; list-style-image: none;

7 — SVG list-style-image

A url() list-style-image source can now be an SVG - rendered as real vector content, not rasterized, same as the SVG background-image support above.

  • Item one
  • Item two
  • Item three
SVG url() image
list-style-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYzAzOTJiIi8+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiIGZpbGw9IiNmMWM0MGYiLz48L3N2Zz4=');
  • Item one
  • Item two
  • Item three
shorthand: inside + SVG
list-style: inside url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYzAzOTJiIi8+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiIGZpbGw9IiNmMWM0MGYiLz48L3N2Zz4=');
  • Item one
  • Item two
  • Item three
shorthand: outside + SVG
list-style: outside url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYzAzOTJiIi8+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiIGZpbGw9IiNmMWM0MGYiLz48L3N2Zz4=');
  • Item one
  • Item two
  • Item three
missing SVG file (graceful fallback)
list-style-image: url('nonexistent.svg');