Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos en tu navegador.
Puntos de color
Usa los manejadores de puntos o las flechas del teclado para editar las posiciones. Cada punto incluye un color, opacidad y porcentaje explícitos.
Procesamiento local nativo del navegador
Tu degradado permanece en este navegador. Ningún color ni CSS generado se envía a Convertr.
Gramática de importación acotada
La importación acepta linear-gradient(), radial-gradient() o conic-gradient() con colores hexadecimales y porcentajes. Las declaraciones, URL, variables y funciones desconocidas se rechazan localmente.
Reserva accesible
El CSS generado incluye un color de fondo sólido de reserva junto con el degradado para renderizadores no compatibles y la interfaz de control accesible.
Preguntas frecuentes
¿Se ha subido mi degradado?
No. El estado del degradado, los colores, el CSS importado y el CSS generado permanecen en tu navegador.
¿Qué tipos de degradados CSS se admiten?
El generador crea la salida de linear-gradient(), radial-gradient() y conic-gradient() con múltiples puntos de color hexadecimal.
¿Qué puedo importar?
La importación acepta una gramática deliberadamente limitada que utiliza una función de degradado admitida, colores hexadecimales, porcentajes opcionales y valores de ángulo o posición acotados.
Herramientas relacionadas para desarrolladores y diseñadores
Generador de degradados CSS
Construye gradientes CSS lineales o radiales y previsualiza las paradas de color, ángulo, posición y repetición.
- Entrada
- Tipo de gradiente, paradas de color, posiciones, ángulo y configuraciones de repetición.
- Salida
- Una vista previa en vivo y una declaración de fondo CSS copiable.
- Limitaciones reales
- El renderizado del navegador puede diferir ligeramente según el motor, y la herramienta no evalúa el contraste ni garantiza soporte en navegadores antiguos.
- Privacidad y tratamiento de datos
- El tipo de gradiente, las paradas de color, las posiciones, el ángulo y las configuraciones de repetición se procesan en esta tabla del navegador.Convertr no lo recibe ni lo almacena; cerrar o recargar la página desliza el estado de trabajo a menos que la herramienta ofrece explícitamente una descarga local.
Cómo utilizar esta herramienta
- Proporcione tipo de gradiente, paradas de color, posiciones, ángulo y configuraciones de repetición en los controles de la herramienta.
- Seleccione las configuraciones que afectan a una vista previa en vivo y la declaración de fondo CSS copiable, luego ejecuta la herramienta.
- Revise una vista previa en vivo y una declaración de fondo CSS copiable antes de copiarla o descargarla.
Modos comunes de fallo
Una parada de color faltante, un color no válido o una posición incompatible impide que se construya una declaración CSS válida.
Ejemplo útil
Crea un gradiente lineal de 90 grados desde #111827 al 0% hasta #f59e0b al 100% y copia la declaración.