Desarrollo y web
Cómo hacer un degradado en CSS
Quiere un degradado detrás de una página, una tarjeta o una diapositiva, y escribir el CSS a base de prueba y error es lento. Elegirá un tipo, colocará los colores y copiará un CSS listo para pegar, o guardará una imagen. Funciona en su navegador.
El texto sobre un degradado tiene que leerse bien en ambos extremos. Pruebe los colores más claro y más oscuro con el color de texto que piensa usar.
Abrir Generador de degradados CSSEn esta sentada
Elija el tipo de degradado
Lineal mezcla en línea recta y sirve para la mayoría de los fondos. Radial se extiende desde el centro, como un brillo suave. Cónico gira alrededor de un punto, como una rueda de color o un gráfico circular.
Los tres tipos se diferencian en el camino que siguen los colores. Abra Generador de degradados CSS en cv.cm
Elija el tipo en Degradado. Pulse un preajuste para tener un punto de partida o Aleatorio para buscar ideas, y la vista previa se actualiza al instante.
Abrir Generador de degradados CSSAjuste la dirección
En lineal y cónico, arrastre Ángulo: 0° apunta hacia arriba, 90° hacia la derecha y 180° hacia abajo. En radial, elija Círculo o Elipse.
Coloque los colores
Cada color tiene una posición de 0% a 100%, y puede usar hasta 6. Añadir color inserta uno y × lo quita. Las posiciones cercanas crean un borde nítido, y las alejadas una mezcla suave.
Cada color ocupa una posición en la línea, y el CSS los enumera en orden. Copie el CSS
Copiar CSS le da dos líneas: un color sólido para navegadores muy antiguos y luego el degradado. Péguelas en la regla CSS de su elemento. Funciona en cualquier bloque con tamaño, como body o una tarjeta.
O guarde un PNG
Para diapositivas y fondos de pantalla, elija un Tamaño de imagen y pulse Guardar PNG. Los tamaños incluyen 1920 × 1080, 2560 × 1440, 1080 × 1920 para móviles y 1080 × 1080 para publicaciones cuadradas.
Preguntas frecuentes
¿Por qué no se ve mi degradado en la página?
Seguramente el elemento no tiene altura. Un degradado rellena la caja del elemento, así que un bloque vacío mide 0 de alto. Dele una altura o contenido; para una página completa, ponga html y body a height 100%.
¿Por qué hay dos líneas de background en el CSS?
La primera es un color sólido y la segunda es el degradado. Un navegador que no puede dibujar el degradado ignora esa línea y se queda con el color.
¿Es mejor background o background-image?
Los dos funcionan, porque un degradado cuenta como imagen. background es más corto y además restablece otros ajustes de fondo, así que use background-image si lo coloca sobre otros fondos.
¿Cómo hago una franja de color nítida?
Ponga dos colores en la misma posición, por ejemplo los dos en 50%. Así no queda espacio para mezclarse y el color cambia en una línea nítida.
¿Por qué el PNG se ve con bandas?
Los degradados muy anchos entre colores parecidos pueden mostrar escalones tenues, porque un PNG guarda 256 niveles por canal de color. Use colores más separados o añada una textura ligera en un editor de imágenes.