CSS

CSS 代码截图生成器

不必离开 Mac，就能把 CSS 代码片段变成值得分享的图片。

当重点在数值上时，CSS 值得截图——一个渐变、一段 grid 定义、一组自定义属性。

Codeshot 会根据你粘贴的代码识别 CSS，不存在选错语言的问题。下面是同一段代码在内置 30 款主题中的三款下的效果，由应用自身的样式表渲染。

: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 · 深色

: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 · 深色

: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 · 深色

为 CSS 选择主题

多数 CSS 片段的重点是颜色值，所以选一个不跟它们抢眼的主题。这里中性主题比花哨的更合适。

把尺寸定对

让图片随内容自适应，或锁定一个比例——1:1、4:3、3:2、16:9、9:16、2:3 或 3:4——然后以 1×、2× 或 3× 导出，在 Retina 屏上依然清晰。用 ⌘⇧C 直接复制到剪贴板，或用 ⌘S 保存。

查看全部 30 款主题对比，或阅读完整流程。

为 CSS 以及另外 59 种语言打造

一切都在你的 Mac 上完成，代码不会外传。

下载 macOS 版