Estas herramientas CSS gratuitas te permiten generar degradados (gradientes), bordes redondeados, sombras y texturas de ruido de forma visual y copiar el código listo para tu hoja de estilos. Todo funciona en el navegador, sin registro y en español: ajusta los valores, mira el resultado en vivo y copia el CSS con un solo clic.
Clic en la barra para añadir un color · arrastra para moverlo · selecciónalo para editar o borrar
El ruido se genera como imagen (data URL) que puedes pegar directamente en tu CSS o descargar.
Cómo usar estas herramientas CSS
- Elige la pestaña de la herramienta que necesites: Gradientes, Bordes redondeados, Sombras o Textura.
- Ajusta los controles (colores, ángulo, radios, desenfoque…) y observa la vista previa en tiempo real.
- Cuando tengas el resultado, pulsa Copiar CSS.
- Pega el código en tu archivo
.csso en el atributostyledel elemento.
Para qué sirve cada herramienta
Generador de gradientes CSS
Crea degradados de color combinando varias paradas. Soporta los tres tipos de degradado de CSS: lineal (en una dirección según un ángulo), radial (desde un centro hacia fuera) y cónico (girando alrededor de un punto). Añade tantos colores como quieras y ajusta su posición.
/* Degradado lineal */
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);
/* Degradado radial */
background: radial-gradient(circle, #f43f5e 0%, #f59e0b 100%);
/* Degradado cónico */
background: conic-gradient(from 90deg, #8b5cf6 0%, #ec4899 100%);Bordes redondeados (border-radius)
Redondea las esquinas de cualquier elemento. Puedes aplicar el mismo radio a las cuatro esquinas o controlar cada una por separado para crear formas asimétricas.
/* Las cuatro esquinas iguales */
border-radius: 24px;
/* Cada esquina: sup-izq sup-der inf-der inf-izq */
border-radius: 24px 8px 24px 8px;Editor de sombras (box-shadow)
Genera sombras para tus elementos HTML controlando el desplazamiento horizontal y vertical, el desenfoque, la extensión, el color y la opacidad. Activa la opción inset para sombras interiores.
/* Sombra exterior suave */
box-shadow: 0px 12px 30px 0px rgba(30,27,75,0.25);
/* Sombra interior */
box-shadow: inset 0px 4px 12px 0px rgba(0,0,0,0.3);Textura de ruido (noise)
Crea fondos con grano y textura, en monocromo o color. La herramienta genera la imagen del ruido y te da el código background-image con el data URL, o puedes descargar el PNG y subirlo a tu biblioteca de medios para un mejor rendimiento.
Tipos de degradados en CSS, en breve
El degradado lineal es el más común y se define por un ángulo en grados. El radial parte de un punto central y es ideal para focos de luz o efectos circulares. El cónico distribuye los colores en círculo alrededor de un punto y se usa para ruedas de color, gráficos o efectos de carga.
Preguntas frecuentes
¿Qué es un gradiente CSS?
Un gradiente CSS es una transición suave entre dos o más colores que se aplica con la propiedad background mediante funciones como linear-gradient, radial-gradient o conic-gradient.
¿Cómo creo un gradiente con varios colores?
En la herramienta de gradientes, haz clic en la barra de color para añadir tantas paradas como quieras, arrástralas para colocarlas y elige el color de cada una. El CSS con todos los colores se genera automáticamente.
¿Estas herramientas son gratis?
Sí, son totalmente gratuitas y no requieren registro. Funcionan en el navegador y puedes copiar el código CSS al instante.
¿Funcionan en todos los navegadores?
Los degradados lineales y radiales, los bordes redondeados y las sombras tienen soporte universal. Los degradados cónicos funcionan en todos los navegadores modernos.
¿Puedo usar el código en WordPress?
Sí. Copia el CSS y pégalo en el personalizador (Apariencia → Personalizar → CSS adicional), en la hoja de estilos de tu tema hijo o en el campo de CSS del propio bloque o módulo.
Más recursos para desarrolladores
Si te han servido estas herramientas, quizá te interesen estas guías del blog:
