CSS

CSS Code-Screenshot-Generator

Verwandle CSS-Snippets in Bilder, die man gerne teilt — ohne deinen Mac zu verlassen.

CSS lohnt sich als Screenshot, wenn es auf die Werte ankommt — ein Verlauf, eine Grid-Definition, ein Satz Custom Properties.

Codeshot erkennt CSS an dem Code, den du einfügst; es gibt also keine Sprachauswahl, die man falsch treffen kann. Hier ist dasselbe Snippet in drei der 30 mitgelieferten Themes, gerendert mit den Stylesheets der App.

: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%);
}
Atom One · dunkel
: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%);
}
GitHub · dunkel
: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%);
}
Panda Syntax · dunkel

Das passende Theme für CSS

In den meisten CSS-Snippets sind die Farbwerte der Punkt, nimm also ein Theme, das ihnen nicht in die Quere kommt. Neutrale Themes funktionieren hier besser als bunte.

Die richtige Größe

Lass das Bild dem Inhalt folgen oder lege es auf ein Verhältnis fest — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 oder 3:4 — und exportiere dann mit 1×, 2× oder 3×, damit es auf Retina-Displays scharf bleibt. Kopiere es mit C direkt in die Zwischenablage oder sichere mit S.

Sieh dir alle 30 Themes im Vergleich an oder lies den kompletten Ablauf.

Gebaut für CSS und 59 weitere Sprachen

Alles läuft auf deinem Mac. Dein Code verlässt ihn nie.

Für macOS laden