CSS
Turn CSS snippets into images worth sharing, without leaving your Mac.
CSS is worth screenshotting when the values matter — a gradient, a grid definition, a set of custom properties.
Codeshot detects CSS from the code you paste, so there is no language picker to get wrong. Here is the same snippet in three of the 30 themes it ships with, rendered with the app's own stylesheets.
:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}Colour values are the point in most CSS snippets, so pick a theme that does not fight them. Neutral themes work better here than colourful ones.
Let the image follow your content, or lock it to a ratio — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, or 3:4 — then export at 1×, 2×, or 3× so it stays sharp on a retina display. Copy it straight to the clipboard with ⌘⇧C, or save with ⌘S.
See all 30 themes side by side, or read the full workflow.
Everything runs on your Mac. Your code never leaves it.