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 de CSS lineales o radiales y previe los parados de color, ángulo, posición y repetición.
- Entrada
- Tipo de gradiente, paradas de color, posiciones, ángulo y configuraciones repetidas.
- Salida
- Una previsión en vivo y una declaración de fondo CSS copiable.
- Las limitaciones reales
- La rendición del navegador puede diferir ligeramente por motor, y la herramienta no evalúa el contraste o garantiza el apoyo en los navegadores heredados.
- 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.Converter 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 repetidas en los controles de herramientas.
- Seleccione las configuraciones que afectan a una previsión en vivo y la declaración de fondo CSS copiable, luego ejecuta la herramienta.
- Revise una previsión en vivo y una declaración de fondo CSS copiable antes de copiar o descargarla.
Modos comunes de fracaso
Una parada de color, color inadecuado o posición incompatible impide que se construya una declaración de CSS válida.
Un ejemplo útil
Crea un gradiente lineal de 90 grados desde #111827 al 0% hasta #f59e0b al 100% y copia la declaración.