Ir a la herramienta
JoeLucky

Haz clic en ★ para guardar una herramienta

Categorías de herramientas

Código a imagenGenerador de degradados CSSGlassmorphism CSSGenerador de box-shadowGenerador de loaders CSSGenerador de blobs SVGSVG a PNGVerificador de contraste de colorConversor PX / REM / EM
JoeLucky

Herramientas en línea prácticas, todas en un solo lugar

Política de privacidadTérminos del servicio

© 2026 JoeLucky®. Todos los derechos reservados.

  1. JoeLucky
  2. /CSS y diseño
  3. /Código a imagen

Código a imagen

Convierte fragmentos de código en capturas de pantalla atractivas.

Relleno40px
Fondo
Vista previa
javascript.ts
1function greet(name) {
2 // Say hello
3 const msg = `Hello, ${name}!`
4 console.log(msg)
5 return msg
6}

CSS Y DISEÑO SIMILARES

Ver todas
Generador de degradados CSS

Diseña degradados lineales, radiales y cónicos y copia el CSS al instante.

Abrir →
Glassmorphism CSS

Genera en directo el código de desenfoque de fondo y borde translúcido.

Abrir →
Generador de box-shadow

💬 Comentarios

?

Aún no hay comentarios. ¡Sé el primero!

¿QUÉ ES Código a imagen?

Convierte un fragmento de código en una imagen limpia y compartible: elige el lenguaje, el tema, el estilo de ventana y el fondo y descarga un PNG, listo para diapositivas, documentos o publicaciones sociales.

¿Cómo se usa?

  1. Pega código en el área de entrada y elige un lenguaje (JS/TS/Python/CSS/HTML/JSON/Bash/SQL/Rust/Go). Las palabras clave, cadenas y comentarios se colorean automáticamente.
  2. Elige entre 6 temas: Dracula, One Dark, GitHub Light, Solarized, Nord y Monokai — cada uno con su propia personalidad de color.
  3. Activa el estilo de ventana «macOS» para añadir los botones rojo/amarillo/verde y lograr un aspecto de editor realista. Los números de línea se pueden activar por separado.
  4. El control «Relleno» (16–80 px) regula el espacio entre el bloque de código y el fondo. Elige entre 5 fondos en degradado o transparente.
  5. Cuando la vista previa te convenza, haz clic en «Descargar PNG» para una imagen de alta resolución 2× — perfecta para Twitter, LinkedIn o artículos técnicos. «Copiar código» copia el texto sin formato.

Preguntas frecuentes

¿Qué lenguajes de programación se admiten?

JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Bash, Java y Go, con resaltado de sintaxis.

¿En qué formato se exportan las capturas?

PNG a resolución 2×, adecuado para blogs, presentaciones y redes sociales.

¿Puedo personalizar el fondo y el estilo de la ventana?

Sí. Varios temas de color, estilos de macOS o sin bordes, color o degradado de fondo, números de línea y relleno.

Crea sombras suaves y en capas con vista previa interactiva.

Abrir →