Generador de degradados
Cree impresionantes degradados CSS con vista previa en vivo. Elija entre presets o personalice los suyos. Copie el codigo CSS o descargue como PNG.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Todo el procesamiento se realiza en su navegador. No se envian datos a ningun servidor.
Como crear un degradado
Elegir tipo
Seleccione el tipo de degradado lineal, radial o conico.
Establecer colores
Agregue paradas de color y ajuste sus posiciones para perfeccionar el degradado.
Ajustar angulo
Use el control deslizante de angulo para controlar la direccion del degradado.
Exportar
Copie el codigo CSS para su sitio web o descargue como imagen PNG.
Preguntas frecuentes
Que tipos de degradados puedo crear?
Puede crear tres tipos: degradados lineales (transiciones de color rectas), degradados radiales (transiciones circulares desde el centro) y degradados conicos (transiciones de color alrededor de un punto central como un grafico circular).
Puedo usar el codigo CSS generado directamente?
Si! Haga clic en el boton Copiar CSS para copiar el codigo. Puede pegarlo directamente en su archivo CSS como propiedad de fondo. Funciona en todos los navegadores modernos.
Cual es el tamano maximo de imagen que puedo descargar?
Puede establecer el tamano de salida hasta 4096 x 4096 pixeles. El valor predeterminado es 800 x 600 pixeles, adecuado para la mayoria de los fondos web.
Como funcionan las paradas de color?
Las paradas de color definen los colores del degradado y donde aparecen. Cada parada tiene un color y una posicion (0-100%). Necesita al menos 2 paradas y puede agregar mas para degradados complejos.
Mis datos estan seguros?
Absolutamente. Toda la generacion de degradados se realiza completamente en su navegador usando Canvas. No se envian datos a ningun servidor.
Casos de uso
Fondos de diseno web
Cree secciones hero, banners y fondos de pagina llamativos con degradados CSS personalizados que coincidan con su marca.
Graficos para redes sociales
Genere fondos degradados vibrantes para publicaciones, historias e imagenes de portada que destaquen.
Diapositivas de presentacion
Disene fondos profesionales para diapositivas con transiciones de color suaves que mejoren sus presentaciones.
Elementos de UI
Agregue fondos degradados a botones, tarjetas, barras de navegacion y otros componentes de UI para un aspecto moderno.
Diseno de correo electronico
Descargue imagenes degradadas para encabezados y fondos de correo electronico donde los degradados CSS no son compatibles.
Diseno y prototipado de apps
Prototipos rapidos de pantallas con fondos degradados. Exporte CSS para web o PNG para maquetas de apps nativas.
Cree su degradado perfecto
Disene hermosos degradados con vista previa en vivo. Copie CSS o descargue PNG - gratis y facil.