CSS
Convierte fragmentos de CSS en imágenes que merece la pena compartir, sin salir de tu Mac.
El CSS merece una captura cuando lo que importa son los valores: un degradado, una definición de grid, un conjunto de propiedades personalizadas.
Codeshot detecta CSS a partir del código que pegas, así que no hay selector de lenguaje que puedas equivocar. Aquí tienes el mismo fragmento en tres de los 30 temas incluidos, renderizados con las hojas de estilo de la propia 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%);
}: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%);
}En casi todos los fragmentos de CSS los valores de color son el asunto, así que elige un tema que no compita con ellos. Aquí los temas neutros funcionan mejor que los coloridos.
Deja que la imagen siga a tu contenido o fíjala a una proporción — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 o 3:4 — y exporta a 1×, 2× o 3× para que se mantenga nítida en pantallas retina. Cópiala al portapapeles con ⌘⇧C o guárdala con ⌘S.
Mira los 30 temas comparados o lee el flujo completo.
Todo se ejecuta en tu Mac. Tu código nunca sale de ahí.