Los 15 mejores generadores CSS

Lista de los mejores generadores CSS que te ahorrarán trabajar con prueba y error

Ernesto BarrachinaApariencia WebDeja tu comentario

4/5 - (3 votos)

Para el artículo de hoy he recopilado algunas páginas con generadores CSS, a las que puedes recurrir cuando tengas dudas, un poco de pereza o simplemente quieras experimentar con el código.

Seas primerizo o experimentado en el diseño de páginas web, ¿cuántas veces has recargado una página hasta llegar a la configuración correcta de una regla CSS? Venga a darle al Ctrl+F5 (refrescar página), una y otra vez, a ver si has ajustado bien los valores de la sentencia.

Me ha pasado en tantas ocasiones que no podría contarlas, especialmente trasteando con animaciones CSS un poco más complejas.

Para evitarme tener que escribir la regla y ejecutar la página; para acabar viendo que no me convence mucho el resultado, y tener que volver sobre mis pasos, recurro a generadores de código CSS.

La ventaja de estos generadores, es que puedes ver directo el letter-spacing o el radio de propagación de una sombra, por ejemplo, sin tener que ir a base de prueba y error en una web real.

Ya sabes que en algunos casos es difícil acertar a la primera, porque lo que funciona con ciertos colores o tipografías no lo hace bien con otros, así que no queda más que probar y probar.

Primera lectura recomendada 😉

Antes de nada debo recomendarte los tutoriales CSS que tienes en esta misma web.

Por si no los has leído, te dejo los enlaces directos a los 4 artículos del curso. Una lectura con ejercicios prácticos incluidos, que te facilitarán el aprendizaje de código CSS y CSS3 desde el principio hasta un ponto en que puedas valerte por ti solo.

  1. Qué es y para qué sirve CSS.
  2. Dónde y cómo se utilizar CSS.
  3. Selectores CSS, IDs y Class.
  4. Terminamos de aprender CSS.

Cómo funcionan los generadores CSS

Cuando no se está muy seguro de la sintaxis, o no se conoce la propiedad que aplicar a un determinado elemento, es mucho más sencillo acudir directamente a un generador de CSS que estar buscando soluciones por ahí.

Los generadores CSS permiten la visualización en directo del estilo o comportamiento que tendrán los elementos, antes de aplicarles la reglas en tu sitio web.

Suelen tener un entorno bastante intuitivo y visual, y solo deberás introducir algunos parámetros para que se reflejen en la vista previa. Con lo que puedes probar varias veces o diferentes opciones, sin tener que estar refrescando la página constantemente.

Conforme manipules el elemento, irás viendo que se escribe el código CSS que necesitas de forma automática. De este modo, cuando tengas las propiedades y valores ajustados solo tendrás que copiar las reglas y pegarlas en tu archivo style.css.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Los mejores generadores CSS

Como en todo, hay algunos generadores sencillos y otros muy enrevesados, en los que te toca trabajar desde confusas plataformas que se parecen más Photoshop que a algo relacionado con programación.

Me voy a decantar por generadores fáciles de usar, con los que puedes dar estilo a textos, botones, cajas…, o crear animaciones igual que en los generadores de código CSS más complicados.

CSS3 Button Generator

Es una plataforma desde la que puedes crear botones personalizados. Tiene una página de escaparate con algunos prediseñados, para que puedas utilizarlos tal cual o hacer los tuyos a partir de ellos.

Los generadores CSS te permiten dar estilo a botones sin escribir código CSS

CSS3 button Generator

CSS Button Generator

Tiene casi el mismo nombre y el mismo objetivo que el generador de CSS anterior, y aunque parece más simple por tener las opciones en un desplegable tipo acordeón, ofrece las mismas prestaciones.

Uno de los mejores generadores CSS de internet para generar botones CSS3

CSS Button Generator

CSS3 Generator

Una web bastante completa con diversos generadores CSS para crear gradientes, bordes, sombras, fondos, transformaciones y animaciones.

Existen plataformas con generadores para diferentes características

CSS3 Generator

Ultimate CSS Gradient Generator

Generador de gradientes muy intuitivo para crear backgrounds con degradados o diseñar el fondo de los botones de tus llamadas a la acción.

Dispones de un generador de gradientes fácil de usar, incluso para IE

Colorzilla

Ui Gradients

En este caso no se trata de un generador CSS, sino de una biblioteca de gradientes prefabricados.

Simplemente elige el que te gusta entre los del escaparate y clica sobre el botón que muestra el código CSS. Fíjate en que puedes rotar el degradado desde el botón de arriba a la derecha.

Además de generadores tienes disponibles páginas web con gradientes personalizados prefabricados

Ui Gradients

CSS Matic

Otro generador con varias posibilidades, que tiene de especial la opción de generar texturas con ruido.

Hay generadores CSS con los que puedes crear una textura con ruido

CSS Matic

CSS3 Generator

Suite con opciones para modificar diferentes propiedades y que puede ser un poco confusa al principio, porque no dispone de la vista previa hasta que se introducen los valores. Pero útil como todas.

Varios generadores en una sola página web

CSS3 Generator

Web Code Tools

En este caso nos encontramos con algo más que un generador de CSS, ya que actúa como «chuleta» para alguna cosa más.

Este es un super generador de código CSS, HTML, Metadatos, etc.

Web Code Tools

Wait! Animate

Este generador mola mucho. Ofrece los códigos para animar iconos mediante keyframes, a los que les puedes manipular los tiempos entre iteraciones y el tipo de animación. Con las mismas instrucciones puedes animar cualquier otro elemento aunque no sea un icono.

Con este generador podrás crear las animaciones CSS para tus iconos

Wait Animate

CSS Animate

En este generador la cosa se complica un poco en cuanto a su uso, pero vale la pena echarle una mirada porque se pueden crear animaciones bastante llamativas.

Existen otros generadores CSS que permiten realizar animaciones muy complejas

CSS Animate

Griddy

Asistente ideal para generar contenedores de tipo rejilla como los de Bootstrap.

Asistente para generar rejillas tipo Bootstrap con CSS

Griddy

Doodle Nerd

Un elemento complicado de crear desde cero son las cintas, pero desde esta web es muy fácil.

Entre los generadores CSS más chulos está este generador de cintas o ribbons

Doodle Nerd

CSS Arrow Please

De gran ayuda para crear cajas de texto con flechas e ideal para personalizar tooltips.

Una de las cosas que puedes hacer con los generadores de CSS es personalizar tooltips y cajas de texto

CSS Arrowplease

DS Overdesign

He dejado este para el final porque además de ser un generador con varias opciones, tiene dos en concreto (burbujas y lluvia), que te pueden servir para decorar un landing page el día que quieras hacer una locura. Las dos necesitan de un par de archivos javascript que también te proporciona.

Este generador ofrece la posibilidad de crear burbujas animadas y lluvia con CSS y javascript

DS Overdesign

Color Space

Este es un generador de paletas y gradientes CSS que me flipa, por eso he querido actualizar este post con él. Y lo utilizo para generar fondos degradados para los div o contenedores. Para que tengan… «ese toquecito».

No te pongo ni foto ni nada, pero si le echas un vistazo vas a alucinar con el recurso 😉

Color Space

En la lista he incluido los mejores generadores de código CSS.

Puede que una de las herramientas favoritas de cualquier diseñador web, no solo porque evitan picar código, sino que además permiten experimentar en directo.

Así que prueba alguno de estos generadores CSS para evitarte recargas innecesarias, y por qué no, para que tal vez te descubra nuevas propiedades que modificar.

¿Conoces otros generadores CSS que se puedan añadir a esta lista?

Si te ha gustado comparte

About the Author

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺