Generador de Degradados CSS Gratuito en Línea
Crea degradados CSS lineales, radiales y cónicos con vista previa en tiempo real. Copia el código CSS al instante.
Who uses the Generador de Degradados CSS?
- Desarrolladores frontend creando degradados de fondo para secciones hero y componentes de UI.
- Diseñadores prototipando identidades visuales basadas en degradados y transiciones de color de marca.
- Estudiantes de CSS entendiendo la sintaxis de degradados a través de un constructor visual e interactivo.
How the Generador de Degradados CSS works
Selecciona el tipo de degradado: Linear, Radial o Conic.
Haz clic en la muestra de color de un punto de parada para cambiar su color mediante el selector de color.
Usa el control deslizante junto a cada punto para ajustar su posición, o haz clic en «+ Add color stop» para uno nuevo.
Ajusta el ángulo (linear/conic), luego copia el código CSS del panel de salida.
Tips & tricks
- Necesitas al menos 2 puntos de color — el botón de eliminar (×) solo aparece con 3 o más puntos.
- Los degradados radiales ocultan el control de ángulo ya que un degradado circular centrado no tiene dirección que ajustar.
- Los puntos siempre se muestran en orden de posición en el CSS de salida, independientemente del orden en que los añadiste.
- El selector de color no admite canal alfa/transparencia — añade rgba() manualmente en el CSS copiado si necesitas un punto transparente.
Frequently Asked Questions
¿Cuál es la sintaxis CSS para un degradado lineal?
background: linear-gradient(dirección, color1, color2). Ejemplo: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). La dirección puede ser un ángulo (45deg) o una palabra clave (to right, to bottom right).
¿Cómo creo un degradado radial?
background: radial-gradient(forma tamaño at posición, color1, color2). Ejemplo: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Esta herramienta genera un degradado radial circular centrado.
¿Puedo añadir más de dos puntos de color?
Sí. Haz clic en «+ Add color stop» tantas veces como necesites. Cada punto tiene su propio selector de color y control deslizante de posición, y los puntos se ordenan automáticamente por posición en el CSS de salida.
¿Cómo creo un degradado transparente?
Usa rgba() o hex con alfa para puntos transparentes. Ejemplo: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) crea un desvanecimiento a oscuro — se usa comúnmente como superposición en imágenes hero para la legibilidad del texto. El selector de color de esta herramienta no incluye canal alfa, así que edita el CSS copiado manualmente para transparencia.
¿El degradado CSS funciona en todos los navegadores?
Los degradados CSS se admiten en todos los navegadores modernos (Chrome, Firefox, Safari, Edge, Opera). No se requiere estrictamente un prefijo de proveedor (-webkit-) para navegadores modernos, aunque esta herramienta incluye una línea con prefijo -webkit- en su salida para cobertura de navegadores más antiguos.
Is my data safe when using the Generador de Degradados CSS?
Completely safe. The Generador de Degradados CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador de Degradados CSS output in commercial projects?
Yes. The Generador de Degradados CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador de Degradados CSS follow official standards?
Yes. The Generador de Degradados CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.