Que tipos de gradiente CSS admite esta herramienta?

Lineal, radial y conico. Lineal usa un angulo en grados. Radial elige circulo o elipse mas una posicion. Conico usa un angulo from y una posicion.

Como funcionan las paradas de color?

Cada parada es un color hex mas una posicion opcional de 0% a 100%. Deja la posicion vacia para que el navegador espacie las paradas. Necesitas al menos dos colores validos.

Debo copiar la regla background completa o solo el gradiente?

Usa Copiar background para `background: linear-gradient(...);` listo para pegar. Usa Copiar valor cuando necesites solo la funcion, por ejemplo en `background-image` o una custom property.

Puedo usar transparente o hex de 8 digitos?

Si. Introduce #rrggbbaa (o elige un color solido y edita el hex). Los hex invalidos se omiten hasta que los corrijas.

Mis datos salen del dispositivo?

No. El Generador de Gradientes CSS corre solo en tu navegador. Colores y ajustes no se suben ni se guardan en un servidor.

Herramientas generadoras

Generador de Gradientes CSS

Crea gradientes CSS para fondos, botones y heroes sin salir del navegador.

El CSS del gradiente se genera en tu navegador. Nada se sube.

Tipo de gradiente

Angulo (grados)

0 es arriba, 90 derecha, 180 abajo, 270 izquierda.

Paradas de color

Color de la parada 1
Color
Posicion %
Color de la parada 2
Color
Posicion %

Salida CSS

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

Acerca de Generador de Gradientes CSS

Crea gradientes CSS para fondos, botones y heroes sin salir del navegador. Cambia entre lineal, radial y conico, ajusta angulo o posicion, anade hasta ocho paradas de color y copia una declaracion `background:` lista o solo el valor del gradiente. Combinalo con el Convertidor HEX a RGB para los colores o el Minificador CSS antes de publicar. Nada se sube.

Cómo usar Generador de Gradientes CSS

Elige lineal, radial o conico.
Define el angulo (lineal / conico) o la forma y posicion (radial / conico).
Edita las paradas de color - hex y % opcional - o anade mas.
Copia el CSS de background o el valor del gradiente a tu hoja de estilos. Todo queda en tu dispositivo.

Ejemplos de Generador de Gradientes CSS

Lavado diagonal de marca

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - un fondo habitual para heroes o cards.

Foco radial suave

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) para un vineta suave o fondo de modal.

Rueda de color conica

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) para graficos y anillos decorativos.

Degradado lineal de tres paradas

Anade una parada intermedia (p. ej. #22c55e al 50%) entre dos colores de marca para una mezcla mas rica.

Casos de uso comunes

Disenar fondos de heroes y secciones en CSS
Crear rellenos de botones y badges con varias paradas
Prototipar focos radiales y vinetas suaves
Hacer graficos conicos o anillos decorativos
Copiar declaraciones background listas para produccion

Preguntas frecuentes sobre Generador de Gradientes CSS

Que tipos de gradiente CSS admite esta herramienta?: Lineal, radial y conico. Lineal usa un angulo en grados. Radial elige circulo o elipse mas una posicion. Conico usa un angulo from y una posicion.
Como funcionan las paradas de color?: Cada parada es un color hex mas una posicion opcional de 0% a 100%. Deja la posicion vacia para que el navegador espacie las paradas. Necesitas al menos dos colores validos.
Debo copiar la regla background completa o solo el gradiente?: Usa Copiar background para `background: linear-gradient(...);` listo para pegar. Usa Copiar valor cuando necesites solo la funcion, por ejemplo en `background-image` o una custom property.
Puedo usar transparente o hex de 8 digitos?: Si. Introduce #rrggbbaa (o elige un color solido y edita el hex). Los hex invalidos se omiten hasta que los corrijas.
Mis datos salen del dispositivo?: No. El Generador de Gradientes CSS corre solo en tu navegador. Colores y ajustes no se suben ni se guardan en un servidor.

Convertidor de HEX a RGB

Convierte HEX a RGB (y viceversa) con HSL, CMYK, rampa de tintas y sombras, tarjetas de contraste WCAG y un snippet de tokens CSS: convertidor de códigos de color gratis online.

Convertidor RGB a HSL

Convierte RGB a HSL y HSL a RGB al instante. Convertidor de color gratis con muestra en vivo y CSS rgb() y hsl() listo para copiar.

Convertidor PX a REM

Convierte px a rem y em online con un tamano de fuente base configurable. Convertidor px a rem gratis con tabla de referencia rapida. Corre en tu navegador.

Minificador de CSS

Minificador de CSS online gratis. Comprime y minifica CSS eliminando comentarios y colapsando espacios en blanco: hojas de estilo más pequeñas y páginas más rápidas. Se ejecuta en tu navegador, sin subir archivos.