Command Palette

Search for a command to run...

GE

Generador de gradiente CSS

Crea hermosos gradientes CSS con vista previa en vivo

%
%
CSS ClassCSS
.gradient {
  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}
Inline StyleCSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
Category:css
Mode:Offline
Version:1.0.0
Access:Free

¿Qué es el generador de gradiente CSS?

CSS Gradient Generator interface on Toolz.dev - Create beautiful CSS gradients with live preview

CSS Gradient Generator es una herramienta en línea gratuita que le permite crear hermosos gradientes CSS con una interfaz visual y una vista previa en vivo. Admite tipos de degradado lineal, radial y cónico, lo que le permite diseñar impresionantes transiciones de color para fondos de sitios web, botones, tarjetas y otros elementos de la interfaz de usuario.

La herramienta proporciona una interfaz de arrastrar y soltar intuitiva para agregar y posicionar paradas de color, ajustando la dirección y el ángulo del gradiente y la opacidad de ajuste. Puedes ver exactamente cómo se verá tu degradado en tiempo real, lo que facilita la experimentación con diferentes combinaciones de colores hasta lograr el resultado perfecto.

Una vez que esté satisfecho con su degradado, simplemente copie el código CSS generado y péguelo en su hoja de estilo. La herramienta genera CSS limpia y compatible con varios navegadores que funciona en todos los navegadores modernos. No se necesita experiencia en diseño o codificación para crear gradientes de aspecto profesional.

Una cosa que hay que saber sobre cómo los navegadores dibujan los degradados: los colores se interpolan en sRGB, que no es perceptualmente uniforme. Combinar dos colores fuertemente opuestos, siendo el azul al amarillo el caso clásico, lleva el punto medio a través de un gris desaturado que ninguno de los colores finales sugiere. Las correcciones habituales son agregar un tope en el medio para dirigir el camino o seleccionar los colores finales más juntos en la rueda. Repetir una parada en la misma posición produce un borde duro en lugar de una mezcla, que es como se construyen los efectos de franja y banda. Los prefijos de proveedores ya no son necesarios para los degradados estándar en cualquier navegador que aún reciba actualizaciones, por lo que la salida más corta también es la más compatible. Los degradados están pintados como fondos, por lo que necesitan un cuadro con dimensiones para ser visibles.

¿Cómo usar el generador de degradado CSS?

1

Elija el tipo de degradado

Seleccione entre tipos de degradado lineal, radial o cónico. Cada tipo crea un tipo diferente de efecto de transición de color.

2

Agregar paradas de color

Haga clic para agregar paradas de color y elija colores para cada parada. Arrástrelos para ajustar su posición a lo largo del degradado.

3

Ajustar dirección y ángulo

Establezca la dirección o el ángulo del gradiente para degradados lineales, o la posición central para los degradados radiales para controlar cómo fluyen los colores.

4

Copiar el código CSS

Copie el código CSS generado con un clic y péguelo directamente en su hoja de estilo. El código está listo para usar en cualquier proyecto web.

Características clave

Clase y salida en línea

El degradado se emite como regla CSS y como declaración de fondo simple para un estilo en línea, cada uno con su propio botón de copia

Tipos de gradientes múltiples

Crea gradientes lineales, radiales y cónicos con control total sobre la dirección, el ángulo y la forma

Vista previa visual en vivo

Vea su actualización de degradado en tiempo real mientras ajusta colores, paradas e instrucciones

Copia CSS con un solo clic

Copie el código CSS de navegador cruzado listo para pegar en sus hojas de estilo

Frequently Asked Questions

Establezca la propiedad de fondo en una función de gradiente: Fondo: Linear-Gradient(90deg, #ff0000, #0000ff). El primer valor es la dirección (un ángulo como 90 grados o una palabra clave como "a la derecha") y todo después de que se detenga una lista de colores. Construya el degradado visualmente aquí y copie la declaración terminada directamente en su hoja de estilo.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

cssgradientlinearradialconiccolorbackgroundgenerator