CSS y web
Degradados CSS, SVG, Tailwind y fondos web rápidos y bonitos.
200 guías · 11 temas
CSS y webDegradado lineal CSS: guía completa de linear-gradient()
7 min de lectura
Cada parte de linear-gradient() explicada con un ejemplo en vivo junto a su código, desde la dirección por defecto hasta los cortes duros, los brillos en capas y las mezclas OKLCH más suaves.
CSS y webDegradado radial en CSS: formas, tamaños y posiciones
5 min de lectura
radial-gradient() dibuja el color hacia fuera desde un punto. Aquí tienes cada una de sus partes, con ejemplos en vivo y los trucos de capas detrás de los brillos suaves, los focos y las viñetas.
CSS y webDegradado cónico CSS: ruedas, gráficos circulares y brillos
5 min de lectura
conic-gradient() barre el color alrededor de un punto como la aguja de un reloj. Esa idea dibuja ruedas de color, gráficos circulares y de anillo, brillos metálicos y estallidos.
CSS y webDegradado de malla en CSS: cómo crearlo con capas radiales
6 min de lectura
No existe mesh-gradient() en CSS. Este es el método de capas que lo imita con convicción, el desenfoque y el grano que lo rematan y cuándo es mejor una imagen o un shader.
CSS y webTexto con degradado en CSS, bien hecho
6 min de lectura
Tres líneas de CSS ponen un degradado dentro de tus letras. Hacerlo legible, robusto y con gusto lleva unas cuantas más, y saber cuándo dejar el texto liso.
CSS y webBorde con degradado en CSS: cuatro formas de dibujarlo
5 min de lectura
border-color no admite un degradado, así que todo contorno con degradado es un apaño. Aquí van los cuatro que importan, qué puede y qué no puede hacer cada uno y cuál elegir.
CSS y webFondos con degradado animado en CSS, bien hechos
5 min de lectura
Los degradados no se pueden animar directamente, pero sí todo lo que los rodea. Cuatro técnicas, lo que le cuesta cada una al navegador y cómo mantener el movimiento sereno y opcional.
CSS y webDegradado CSS con OKLCH: interpolación para mezclas más suaves
6 min de lectura
La mayoría de los degradados apagados y grises en el medio no tienen un problema de color, sino de matemáticas. Dos palabras, in oklch, cambian dónde hace las cuentas el navegador.
CSS y webTextura de ruido en CSS: añade grano a los degradados con SVG
5 min de lectura
Una tenue capa de ruido oculta el banding y hace que un color plano de pantalla se sienta como impreso o película. Este es el filtro SVG que hay detrás, ajustado y listo para pegar.
CSS y webClases de degradado en Tailwind: lineal, radial y cónico en v4
5 min de lectura
Tailwind v4 renombró sus utilidades de degradado, añadió ángulos, degradados radiales y cónicos, y cambió la mezcla por defecto a oklab. Aquí tienes el sistema completo, con el CSS que genera cada clase.
CSS y webDegradados SVG: lineales, radiales, trazos, texto y máscaras
6 min de lectura
SVG tiene su propio sistema de degradados, más antiguo que los de CSS y capaz de cosas que estos no pueden: colorear un trazo, rellenar una palabra, compartir un degradado entre muchas formas y fundir cualquier cosa con una máscara.
CSS y webBotones con degradado en CSS que se sientan premium
5 min de lectura
La mayoría de los botones con degradado parecen baratos por las mismas pocas razones: demasiados tonos, un hover que salta y texto que se pierde en el extremo claro. Esta es la receta que evita las tres.
CSS y webRendimiento de los degradados CSS: ¿ralentizan una web?
7 min de lectura
Un degradado CSS estático es casi gratis. Los costes vienen de lo que se hace con los degradados: desenfoques enormes, fondos que se repintan al hacer scroll y animaciones que nunca paran. Así se distingue una cosa de otra.
CSS y webPatrones CSS con degradados repetidos
5 min de lectura
Los cortes duros convierten los degradados en formas, y background-size convierte las formas en teselas. Con esas dos ideas puedes dibujar la mayoría de los patrones clásicos en pocas líneas, sin archivos de imagen.
CSS y webDegradados en Figma: consejos para resultados más suaves
6 min de lectura
Figma hace un degradado en dos clics y uno bueno en veinte. Aquí tienes el camino rápido por el editor de degradados, más las soluciones para los centros grises, las bandas y el CSS que no coincide.
CSS y webDegradados WebGL con shaders, explicados para diseñadores
7 min de lectura
Algunos degradados de la web se desplazan, brillan y centellean como ninguna imagen ni regla CSS puede. Son shaders. Así funcionan, en palabras que un diseñador puede usar.
CSS y webFondos de degradado en correos: qué funciona en Gmail y Outlook
7 min de lectura
Los degradados quedan maravillosos en un navegador e impredecibles en una bandeja de entrada. Constrúyelos por capas y cada lector verá algo que parece intencionado.
CSS y webImágenes OG dinámicas: vistas previas de enlaces automáticas
7 min de lectura
Hacer a mano una imagen de vista previa para cada página no escala, y una sola imagen genérica para todo el sitio desperdicia la imagen que más se ve. Genéralas en su lugar.