Generador de degradados CSS
Crea un degradado CSS lineal o radial de forma visual y copia el CSS listo para usar, directamente en tu navegador.
🔒 Procesado localmente en tu navegador
Loading…
Cómo usarlo
- Elige Lineal o Radial como tipo de degradado. Para los degradados lineales, arrastra el control deslizante o escribe un valor para fijar el ángulo en grados.
- Cada punto de color tiene una muestra de color y una posición (0-100%). Haz clic en una muestra para elegir un color, o escribe una posición para mover ese punto a lo largo del degradado.
- Usa "Añadir punto" para agregar hasta 5 puntos de color, o "Eliminar" junto a un punto para borrarlo (se requiere un mínimo de 2 puntos).
- El recuadro de vista previa encima de la salida CSS se actualiza en vivo al ajustar cualquier control, sin necesidad de pulsar ningún botón.
- Haz clic en Copiar para copiar la declaración CSS generada, lista para pegar en tu hoja de estilos.
Características
- Admite degradados lineales (con ángulo ajustable) y radiales
- Hasta 5 puntos de color, cada uno con su propio color y posición
- Recuadro de vista previa en vivo que se actualiza al instante con cualquier ajuste
- Copia en un clic de la declaración CSS lista para pegar
- 100% del lado del cliente: tu degradado nunca sale de tu navegador
Preguntas frecuentes
¿Esta herramienta envía mi degradado a algún sitio?
No. El degradado se genera y se previsualiza enteramente con JavaScript y CSS locales; nunca se sube ni se envía nada a un servidor.
¿Cuántos puntos de color puedo añadir?
Hasta 5 puntos. Se necesitan al menos 2 puntos para que un degradado tenga sentido, así que el botón Eliminar se desactiva al llegar a 2.
¿El control de ángulo hace algo en los degradados radiales?
No. Los degradados radiales de esta herramienta siempre irradian hacia afuera desde el centro en forma de círculo, así que el ángulo solo se aplica a los degradados lineales.
¿Qué pasa si dos puntos tienen la misma posición?
Está permitido y puede usarse a propósito para crear un borde de color nítido en lugar de una transición suave; ambos puntos se mantienen en el CSS generado.
¿Puedo pegar la salida directamente en mi archivo CSS?
Sí. El recuadro de salida muestra una declaración `background: ...;` completa que puedes pegar tal cual en una hoja de estilos o en un estilo en línea.