Generador de gradientes CSS
Crea gradientes lineales, radiales y cónicos, configura múltiples puntos de color y obtén código CSS o SCSS con vista previa inmediata.
Gradientes lineales, radiales y cónicos
Un gradiente CSS genera una transición entre dos o más colores sin necesitar una imagen de fondo. Esta herramienta permite crear linear-gradient(), radial-gradient() y conic-gradient() y modificar sus parámetros visualmente.
Múltiples puntos de color
Cada color tiene una posición entre 0% y 100%. Puedes añadir puntos intermedios, eliminarlos, cambiar el color mediante el selector o escribir directamente un valor hexadecimal.
Animaciones CSS
La herramienta puede añadir tres efectos opcionales. El desplazamiento anima background-position, el pulso utiliza transform y la rotación de tono utiliza filter: hue-rotate(). El código generado incluye los @keyframes necesarios.
CSS y SCSS
La pestaña CSS genera una clase lista para utilizar. La salida SCSS separa el gradiente en una variable para facilitar su reutilización en una hoja de estilos Sass.
Preguntas frecuentes
¿Cuántos colores puedo añadir?
Puedes trabajar con varios puntos de color. La herramienta mantiene al menos dos para que el resultado siga siendo un gradiente.
¿Puedo utilizar el código directamente?
Sí. Copia la salida CSS o SCSS y adapta el selector de ejemplo a tu proyecto.
¿La vista previa se actualiza al instante?
Sí. Los cambios de tipo, ángulo, color, posición y animación se reflejan en la previsualización.
Cómo crear un gradiente
- Elige lineal, radial o cónico.
- Configura los puntos de color y sus posiciones.
- Ajusta el ángulo o la posición según el tipo.
- Activa una animación si la necesitas y copia el código CSS o SCSS.