Generador de degradados CSS (capas, repetición)
Cree degradados lineales, radiales y cónicos, apile varias capas, arrastre paradas de color, ajuste ángulo, centro, transparencia y repetición, y copie el CSS
Cargando la herramienta…
Crea un fondo con hasta cuatro degradados lineales, radiales o cónicos apilados y le entrega el CSS de background-image. Las capas translúcidas producen efectos de luz o de malla, la repetición produce rayas y anillos, y la imagen se puede guardar como PNG.
Cómo se usa
- Empiece con una tarjeta de «Predefinidos» o con la configuración inicial. En «Capas», seleccione la capa que quiere editar y ajuste «Tipo», «Ángulo» y «Repetir».
- En las capas radiales y cónicas, haga clic o arrastre en la vista previa para mover el centro y elija «Forma» y «Tamaño».
- Haga clic en la barra «Paradas de color» para añadir una parada y arrastre un círculo para moverla. Debajo, ajuste el color, la «Opacidad», la «Posición» y el «Punto medio» de la parada seleccionada.
- Pulse «Añadir capa» para apilar una capa translúcida encima; reordene las capas o pulse «Ocultar» para comparar.
- Pulse «Copiar» junto al CSS, o elija un «Tamaño del PNG» y pulse «Guardar como PNG».
Cómo funciona
- El resultado es una sola declaración background-image; las capas se pintan de arriba abajo en el orden del CSS. Los colores translúcidos se escriben como rgb(r g b / a).
- El punto medio es la pista de transición de CSS que desplaza el lugar donde dos paradas se mezclan a partes iguales. La repetición repite el tramo desde la primera hasta la última parada, como repeating-linear-gradient.
- Los ángulos y las palabras clave de tamaño radial siguen CSS Images 3, y los colores se mezclan en sRGB como hacen los navegadores por defecto. El PNG se dibuja en el navegador con las mismas reglas.
- Sus capas y paradas se guardan en este navegador.
Preguntas frecuentes
- ¿Cómo apilo varios degradados en CSS?
- Enumérelos en background-image separados por comas. El primero se pinta encima, así que las capas superiores necesitan algo de transparencia. El cuadro de CSS escribe esa forma.
- ¿Cómo hago un fondo de rayas?
- Active «Repetir» y coloque dos paradas del mismo color en la misma posición para obtener un borde nítido. El predefinido «Rayas» es un buen punto de partida.
- El centro de mi degradado se ve sucio. ¿Qué puedo hacer?
- Active «Punto medio» para desplazar el punto de mezcla, o añada una parada en el centro con el color que desea. Los colores complementarios mezclados se vuelven grises.
- ¿Pueden diferir la vista previa y el PNG?
- La vista previa la dibuja el navegador a partir del CSS; el PNG se calcula con las mismas reglas. Salvo por el redondeo, coinciden.