Las herramientas de desarrollo que usas cada día, todas en un mismo lugar.

Conversores, formateadores, hashes, validadores y las pequeñas utilidades que no dejas de reabrir se quedan juntos en lugar de perderse entre pestañas.

GitHub

/ Herramientas

■

/ Buscador de herramientas

109 herramientas

/ Generador de degradados

Tipo de degradado

Ángulo: 90°

0°90°180°270°360°

Paradas de color

100%

Vista previa del degradado

Código CSS

Valor de propiedad CSS

Imagen de fondo

/ Herramienta seleccionada

■

Generador de degradados - herramienta de generación gratuita

Crea degradados CSS atractivos con múltiples paradas de color

■ 01

¿Qué son los gradientes CSS?

Los gradientes CSS crean transiciones suaves entre dos o más colores. Se pueden usar como fondos, bordes y otras propiedades. Los gradientes los renderiza el navegador y escalan perfectamente sin pixelación.

■ 02

¿Cómo funciona?

Los gradientes funcionan definiendo paradas de color en posiciones específicas a lo largo de una trayectoria. Los gradientes lineales hacen la transición de los colores a lo largo de una línea recta en un ángulo especificado, mientras que los radiales hacen la transición desde un punto central hacia afuera en…

■ 03

Casos de ejemplo

Cubre Gradiente lineal, Gradiente radial y Gradiente de múltiples paradas para que puedas comparar entradas y salidas comunes rápidamente.

/ Herramientas relacionadas

/ Código

■

Código fuente de la herramienta seleccionada, mostrado aquí junto a la versión en vivo a la derecha.

/ Código fuente

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {