6XC

Generador de Gradientes CSS

Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código.

839 visitas

Gradientes CSS

Un gradiente es una transición suave entre colores, escrito como linear-gradient(ángulo, color1, color2), radial-gradient(...) o conic-gradient(...). Elige el tipo, el ángulo y hasta tres colores — la vista previa y el CSS listo para copiar se actualizan al instante. Los gradientes los renderiza el navegador, así que no cuestan ninguna descarga de imagen y se ven nítidos en cualquier tamaño.

Preguntas Frecuentes

¿Qué significa el ángulo en un gradiente lineal?

0° apunta hacia arriba, 90° a la derecha, 180° hacia abajo — el ángulo es la dirección hacia la que avanza el gradiente. 135° da la popular diagonal de arriba a la izquierda hacia abajo a la derecha.

¿Cuándo debo usar radial o conic?

Radial se mezcla desde el centro hacia afuera — ideal para focos y viñetas. Conic gira alrededor del centro como una rueda de colores — ideal para gráficos circulares y anillos de arcoíris.

Herramientas Similares

Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar Generador de Bordes CSS Diseña un borde de forma visual — grosor, estilo (solid, dashed, dotted, double…), color y radio — con vista previa en vivo. Generar