CSS Gradient
Generator
Genera hermosos degradados CSS (lineal, radial, cónico) y fondos de patrones con una interfaz intuitiva. Gratis, seguro, se ejecuta en tu navegador.
Editar Color
Código CSS Generado
Código CSS Generado
También te puede interesar
Acerca del Generador de Degradados CSS
El Generador de Degradados CSS es una herramienta gratuita para que desarrolladores y diseñadores creen hermosos fondos de degradado y patrones totalmente en CSS, sin necesidad de JavaScript ni imágenes. A través de una interfaz intuitiva, puedes generar diversos degradados (lineal, radial, cónico) y exportar el código CSS.
Puedes ajustar múltiples colores y la transparencia (alfa) de forma fluida mediante controles deslizantes. También cuenta con 24 preajustes y 12 tipos de patrones CSS, lo que te permite pasar fácilmente de la idea al diseño implementado en tu navegador.
Cómo usar
Seleccionar Tipo y Ajustes Básicos
Abre la pestaña 'Degradado' y selecciona el estilo: lineal, radial o cónico. En los lineales, ajusta el ángulo; en los radiales, establece el punto central y la forma para definir la expansión de los colores.
Añadir y Editar Colores
Haz clic sobre la barra de degradado para agregar un nuevo color. Arrastra los controles para ajustar la transición y utiliza el selector de color inferior (HEX o HSLA) para perfeccionar el color y la transparencia.
Previsualizar y Copiar Código
Comprueba los resultados en tiempo real. Usa el botón 'Pantalla Completa' para verificar el aspecto final, y luego haz clic en 'Copiar CSS' para pegar el código generado directamente en tu proyecto.
Glossary
- Degradado CSS
- Técnica que utiliza funciones CSS como linear-gradient() o radial-gradient() para crear fondos con transiciones suaves entre colores. Al no usar imágenes, mejora la velocidad de carga de la página.
- Parada de Color
- Posición específica (de 0% a 100%) en un degradado que define un color. Al acercar varias paradas, se pueden crear límites definidos o bordes duros.
- Degradado Lineal (linear-gradient)
- El método más común donde los colores cambian linealmente a lo largo de un ángulo (ej. 135deg) o dirección (ej. to right).
- Degradado Radial (radial-gradient)
- Método donde los colores se expanden hacia afuera desde un punto central específico, con forma circular o elíptica.
- Degradado Cónico (conic-gradient)
- Método en el que los colores rotan alrededor de un eje central. Muy útil para gráficos circulares o ruedas de colores hechos puramente con CSS.
- Color HSLA
- Método para definir colores usando cuatro valores: Tono (Hue), Saturación, Luminosidad y Alfa. Permite ajustes intuitivos como hacer un color 'más oscuro' o 'más vivo'.
Preguntas Frecuentes
- Q.¿Puedo usar el código generado en un sitio web comercial?
- Sí, es completamente gratis para uso comercial. El código CSS generado no tiene restricciones y puede ser usado libremente.
- Q.¿Puedo usar esta herramienta en un móvil (smartphone)?
- Sí, la interfaz es totalmente responsiva y el arrastrar los controles de color está optimizado para pantallas táctiles.
- Q.El degradado no se muestra en navegadores antiguos como IE.
- Los navegadores antiguos, incluyendo IE11, podrían no soportar funciones CSS modernas (como conic-gradient). Recomendamos añadir un background-color estático como respaldo si es necesario.
- Q.¿Cómo puedo cambiar el tamaño del patrón de fondo generado?
- Puedes ajustar la escala usando el control deslizante 'Tamaño' en la pestaña Patrón. Esto actualizará automáticamente la propiedad background-size.
- Q.¿Es posible guardar el degradado como una imagen?
- Dado que la herramienta está diseñada para generar código CSS, no tiene exportación a PNG/JPG. Sin embargo, puedes usar el modo de Pantalla Completa y hacer una captura de pantalla.
Casos de Uso
Diseño de Sección Hero
Aplicar degradados pastel o de atardecer a la primera sección de una web puede crear una fuerte impresión en los usuarios.
Implementar Glassmorphism
Al configurar un degradado con transparencia reducida y combinarlo con backdrop-filter: blur(), se logran componentes modernos de vidrio esmerilado.
Patrones de Fondo Ligeros
Crear patrones de puntos o rayas con CSS en vez de imágenes enriquece el diseño sin penalizar el rendimiento ni el PageSpeed.
Visualización de Datos
Los degradados cónicos permiten crear gráficos circulares o barras de progreso usando solo CSS, evitando librerías JavaScript pesadas.
Enviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.