CSS List Style Generator
Generate custom CSS list styles with coloured bullets, custom markers, spacing and emoji or symbol bullets.
Last reviewed by the Radiatus Cloud team
Generate custom CSS list styles with coloured or symbol bullets.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Customise list bullets with CSS
Default list bullets are plain and offer little control over colour or style. This generator creates custom list styling where each item's marker is a coloured symbol of your choice, a dot, checkmark, arrow or dash, with adjustable spacing between items. It removes the default marker and draws a custom one with a pseudo-element, so you get full control over its colour and position.
Apply the generated class to an unordered list to replace dull bullets with styled markers.
Lists that match your design
Coloured checkmarks are perfect for feature lists and benefit summaries, arrows suit step-by-step or navigation lists, and coloured dots give a clean, branded look. Comfortable spacing between items improves readability, especially for longer lists. Because the markers are text symbols, they stay crisp and recolour instantly.
Pick a marker that suits the list's meaning and a colour that fits your palette. All generation happens locally in your browser, so you can preview combinations before copying.
Notes on the generated code
Because the css list style generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
How are the custom markers created?
The default bullet is removed and a symbol is drawn with a pseudo-element, giving full control over its colour and position.
What markers can I choose?
A coloured dot, a checkmark, an arrow or a dash, each suited to different kinds of lists such as features or steps.
Why use checkmark bullets?
Coloured checkmarks work well for feature and benefit lists, visually reinforcing that each item is included or positive.
How do I control item spacing?
The generator sets the bottom margin on each list item, which you can adjust to make longer lists easier to read.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the marker, colour and spacing, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.