Degradado CSS

Diseña degradados CSS lineales y radiales con un editor visual y copia el código CSS.

100% gratis · Sin límites

Presets:

Tipo de degradado

Angle: 135deg

Puntos de color

100%

Vista previa

Código CSS

background: linear-gradient(135deg, #00ff88 0%, #00ccff 100%);

Constructor visual

Crea degradados visualmente con vista previa en vivo. Ajusta colores, posiciones y ángulos en tiempo real.

Tres tipos de degradado

Soporte para degradados lineales, radiales y cónicos con control total sobre dirección y forma.

100% del lado del cliente

Todo el procesamiento ocurre en tu navegador. Los datos nunca salen de tu dispositivo.

Cómo crear un gradiente CSS

Diseña hermosos gradientes CSS de forma visual con el Generador de Gradientes gratuito de The IT Hustle.

1
Elige un tipo de gradienteSelecciona entre gradientes lineales, radiales o cónicos en las opciones de la parte superior.
2
Elige tus coloresUsa los selectores de color para definir los puntos del gradiente. Añade varios puntos para gradientes más complejos.
3
Ajusta la direcciónPara gradientes lineales, define el ángulo. Para gradientes radiales, elige la forma y la posición.
4
Copia el código CSSHaz clic en el botón Copiar para copiar el código CSS generado, listo para pegar en tu hoja de estilos.

Preguntas frecuentes

La herramienta admite gradientes lineales (transiciones en línea recta), radiales (transiciones circulares) y cónicos (transiciones basadas en ángulo).

Sí. Añade tantos puntos de color como quieras para crear gradientes multicolor complejos. Cada punto se puede posicionar con precisión.

Sí. La salida usa la sintaxis estándar de gradientes CSS, compatible con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.

Herramientas relacionadas

Generador de Paleta de Colores Generador de Meta Tags Generador de Favicons