Generador de gradiente CSS
Opciones
Parada de color 1
Parada de color 2
Color3
Estado
inactivo
Vista previa en vivo
Acerca del generador de degradado CSS
Esta herramienta le ayuda a generar y analizar gradientes lineales y radiales de CSS.
Es útil para el diseño de interfaces de usuario, páginas de destino, fondos, botones, tarjetas y experimentos visuales de CSS.
Cómo utilizar la herramienta
- Elija degradado lineal o radial.
- Establezca ángulos, colores y posiciones de parada.
- Vea la actualización de vista previa en vivo al instante.
- Copie el CSS generado cuando se vea bien.
- O pegue un degradado existente en la entrada y haga clic en Analizar.
Consejos
- Los degradados lineales son útiles para botones, tarjetas y fondos de héroes.
- Los degradados radiales son útiles para efectos de brillo, focos y fondos suaves.
- Cambiar las posiciones de las paradas puede hacer que la transición sea más suave o más nítida.
- El fuerte contraste entre colores hace que los degradados sean más dramáticos.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Convertidor de colores
Convierta colores HEX, RGB, RGBA y HSL instantáneamente en su navegador.
Utilidades varias
›
Codificador/decodificador de entidades HTML
Codifique y decodifique entidades HTML instantáneamente en su navegador.
Codificación y seguridad
›
Metaetiquetas/Vista previa de gráfico abierto
Obtenga una vista previa de fragmentos de Google y Open Graph y genere metaetiquetas.
SEO y webmaster
›
Preguntas frecuentes sobre el generador de degradado CSS
¿Qué es un gradiente CSS?
Un degradado CSS es una imagen generada por CSS que realiza una transición suave entre dos o más colores.
¿Esta herramienta admite gradientes lineales?
Sí. Puede generar y analizar gradientes lineales.
¿Esta herramienta admite gradientes radiales?
Sí. También puede generar y analizar gradientes radiales.
¿Puedo pegar un degradado existente?
Sí. Pegue una cadena de degradado CSS en el campo de entrada y haga clic en Analizar.