CSS Code Screenshots — What the Highlighter Marks
A stylesheet mixes three or four languages at once. Selectors, at-rules, property names and comments are handled separately, so a media query block does not collapse into a single wall of colour.
A short CSS snippet
.card {
display: grid;
gap: 16px;
padding: 24px 28px;
border-radius: 14px;
box-shadow: 0 14px 40px rgba(60, 50, 30, 0.1);
}
What gets coloured
| Token class | Rule | How it looks |
|---|---|---|
| Comments | /* */ blocks | Muted, never competing with the code |
| Strings | Quoted font names and content | Distinct from identifiers at a glance |
| Keywords | 30 reserved words | Accent colour, the loudest thing on the page |
| Numbers | Integers and decimals | Same weight as code, no outline box |
| Function calls | Identifier followed by a parenthesis | Slightly heavier than plain identifiers |
Rendering it as an image
Paste the snippet into the tool, pick a theme and an export width. The renderer keeps your indentation, wraps long lines only when you ask it to, and can export either a flat PNG or a transparent one for slides. The default window chrome is optional, so a two-line example does not have to look like a browser window.
Other languages
Frequently asked questions
How many keywords does the CSS highlighter know?
It ships a fixed list of 30 words for CSS. The list is deliberately flat rather than a full grammar: the tool exists to make a snippet legible in a screenshot, not to type-check it, so contextual keywords that need parsing stay in the plain text colour.
What happens to code the highlighter misreads?
Nothing is rewritten. Highlighting only adds colour spans on top of the exact characters you pasted, so the exported PNG always contains your original text. A keyword inside a string stays a string, and a comment marker inside a string is not treated as a comment.
Try it with your own CSS: the Code2Image code to image generator is entirely client-side, so the snippet never leaves the browser.