Generador de degradados CSS
Crea degradados CSS con vista previa en vivo. Ajusta puntos de color, tipo, ángulo y posición, y revisa el resultado como fondo, botón, texto o borde antes de copiar el código.
Ajustes del degradado
Primero define el tipo; después afina dirección y puntos de color.
Vista previa y código CSS
Compara el uso real con el CSS listo para copiar.
Texto con degradado
class="my-gradient"dentro del flujo.
- Pantalla visibleEntrada y resultado quedan claros desde el primer vistazo.
- Resultado primeroLa salida útil va antes que la explicación larga.
- Menos requisitosSin registro ni datos innecesarios para empezar.
Cómo crear degradados CSS para fondos, texto, botones y bordes
Un generador de degradados CSS no debería limitarse a combinar dos colores. Lo importante es saber dónde se usará el degradado, qué función de CSS corresponde y si el resultado se lee bien en fondos, botones, texto, bordes y modo oscuro.
En esta página puedes crear degradados lineales, radiales y cónicos, mover puntos de color, comparar vistas previas y copiar el fragmento de CSS que necesitas.
Qué crea este generador de degradados CSS
La herramienta genera código CSS sin usar imágenes. El mismo conjunto de colores se puede ver como fondo, botón, texto recortado o borde.
Sirve para decidir visualmente y llevarte un código que puedas probar en tu hoja de estilos.
- Genera linear, radial y conic gradients.
- Permite editar colores y posiciones.
- Muestra variables CSS y prefijos opcionales.
- Compara fondo, botón, texto y borde.
Cómo crear un degradado CSS
Empieza por el uso real. Un fondo amplio, un botón pequeño y un título con texto degradado necesitan controles distintos.
- Elige el tipo de degradado.
- Ajusta el ángulo, centro o posición según el tipo.
- Añade o mueve puntos de color.
- Revisa las pestañas de vista previa.
- Copia el CSS que corresponda al uso final.
Diferencias entre linear, radial y conic
Linear fluye en una dirección y es la opción más segura para fondos. Radial se expande desde un centro. Conic gira alrededor de un centro y funciona bien para ruedas, anillos o efectos circulares.
Un radial no cambia con el ángulo lineal; cambia con la forma y la posición.
- Linear: tarjetas, banners, paneles
- Radial: brillos, focos, acentos circulares
- Conic: ruedas de color, diales, anillos
Puntos de color y posiciones
Un punto de color incluye color y porcentaje. Mover un punto cambia la zona de transición aunque los colores sean los mismos.
Para interfaces reales, 2 a 4 puntos suelen ser más legibles que una mezcla demasiado cargada.
- Dos puntos: transición simple.
- Tres puntos: tono central controlado.
- Cuatro o más: uso decorativo o hero visual.
Texto y borde degradado necesitan CSS diferente
Un fondo usa `background`. El texto degradado necesita recorte de fondo y color transparente. Un borde degradado suele requerir fondos en capas o border-box.
Por eso conviene mirar cada vista previa antes de copiar.
- Texto: revisar soporte y legibilidad.
- Borde: comprobar que el borde se vea.
- Botón: comprobar etiqueta y estado hover.
Variables CSS y prefijos
Las variables CSS son útiles si reutilizas los mismos colores en varios componentes. Para un adorno puntual, una regla directa puede bastar.
Los prefijos sirven para revisar compatibilidad. En proyectos modernos, la sintaxis estándar debe ser la referencia principal.
- Uso único: copia directa.
- Sistema visual compartido: variables.
- Compatibilidad: revisar prefijos.
Contraste antes de copiar
Un degradado puede tener zonas claras y oscuras al mismo tiempo. El texto puede verse bien en un extremo y perderse en otro.
Comprueba el color real del texto, el fondo, el hover y el modo oscuro.
- El contraste manda sobre la decoración.
- Los botones deben leerse en todos los estados.
- Los bordes necesitan grosor y contraste suficientes.
Generador, formatter y minifier no son lo mismo
Este generador crea valores de degradado. Un formatter ordena CSS existente. Un minifier reduce tamaño para producción.
Crea primero el degradado y después ordena o minifica la hoja cuando el código esté integrado.
- Crear un degradado: esta herramienta
- Ordenar CSS existente: CSS formatter
- Reducir tamaño: CSS minifier
Errores comunes al usar degradados
Si no ves cambios, revisa si el control aplica al tipo activo. Si el CSS copiado no se muestra, puede haber otra regla con mayor prioridad.
- El ángulo no cambia un radial.
- El texto necesita background-clip.
- El borde necesita patrón border-box.
- Conviene renombrar la clase antes de publicar.
Preguntas frecuentes
¿Cómo creo un degradado CSS?
Elige el tipo, ajusta los puntos de color, mira la vista previa del uso final y copia el fragmento CSS generado.
¿Qué conviene usar: linear, radial o conic?
Linear sirve para la mayoría de fondos, radial para brillos o puntos circulares, y conic para anillos, diales o ruedas de color.
¿Por qué el ángulo no cambia un degradado radial?
Porque un radial depende de la forma y la posición del centro, no de una dirección lineal. Para dirección usa linear o conic.
¿Cómo se hace un borde degradado en CSS?
Usa un borde transparente con fondos en capas o un patrón border-box para que el degradado aparezca en el contorno.
¿Puedo pegar el CSS directamente?
Sí para probar, pero antes de publicar cambia la clase y revisa contraste, hover, modo oscuro y posibles reglas que lo sobrescriban.