UTILS.
Privadas por defecto
▤

Generador de Gradientes CSS

Crea un gradiente lineal o radial con vista previa en vivo y copia el CSS.

Tus archivos se quedan en este dispositivo

Los archivos se procesan en tu navegador, sin subirse a ningún servidor. El sitio descarga el código y los recursos necesarios. Sin cuentas ni rastreadores.

Usa Descargar para guardar esta herramienta como un archivo HTML y usarla sin conexión.

Privacidad →

Prueba un ejemplo resuelto

Ejemplo

Elige el tipo lineal, pon el ángulo en 135 y los colores en #ff7e5f y #feb47b. El CSS es background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Si mueves la primera parada a 20, el primer color queda sólido en el primer 20 % de la caja.

Ten en cuenta

0deg apunta hacia arriba y 90deg hacia la derecha, así que 135deg va de la esquina superior izquierda a la inferior derecha. Si hay texto sobre un degradado, comprueba su contraste con los dos colores extremos.

Acerca de esta herramienta

Crea un gradiente lineal o radial de dos colores eligiendo colores, posiciones y un ángulo, y luego copia la regla de fondo. La vista previa en vivo se ejecuta por completo en tu navegador.

Preguntas frecuentes

¿Qué es el ángulo en un gradiente lineal?
El ángulo establece la dirección de la transición de color: 0° apunta hacia arriba, 90° hacia la derecha, 180° hacia abajo, y así sucesivamente.
¿Cuándo debo usar radial en lugar de lineal?
Usa radial para irradiar colores hacia afuera desde un punto central (como un foco de luz); el lineal los mezcla a lo largo de una línea recta.

Más herramientas