Degradados, bordes y sombras en CSS

Un diseño plano con colores lisos funciona, pero los detalles marcan la diferencia: un degradado en la portada, unas esquinas redondeadas, una sombra suave que despega una tarjeta del fondo. En esta lección aprenderás a controlar los fondos con todas sus opciones, a crear degradados sin usar imágenes, a dominar los bordes y a añadir sombras a cajas y textos.

Si todavía no sabes escribir colores en CSS (hexadecimal, rgb, hsl…), repasa primero la lección de colores.

Los fondos a fondo: background

background es en realidad un atajo de varias propiedades. Conviene conocerlas por separado antes de juntarlas.

Color e imagen de fondo

.cabecera {
  background-color: #1b2d34;
  background-image: url("img/montania.jpg");
}

El color se pinta debajo de la imagen. Ponlo siempre aunque haya imagen: se ve mientras carga, y si la imagen falla el texto blanco sigue leyéndose sobre un fondo oscuro.

Tamaño: background-size

Por defecto la imagen se muestra a su tamaño real. Casi nunca es lo que quieres:

.portada { background-size: cover; }    /* cubre toda la caja, aunque recorte */
.logo    { background-size: contain; }  /* se ve entera, aunque sobre hueco */
.patron  { background-size: 40px 40px; } /* tamaño exacto */

Valor	Qué hace	Cuándo usarlo
cover	Escala la imagen hasta cubrir la caja. Recorta lo que sobra	Fotos de portada
contain	Escala la imagen hasta que quepa entera. Puede dejar huecos	Logos, ilustraciones
auto	Tamaño original (por defecto)	Patrones pequeños

Posición y repetición

.portada {
  background-position: center;      /* centrada */
  background-position: top right;   /* esquina superior derecha */
  background-position: 50% 30%;     /* un poco por encima del centro */
  background-repeat: no-repeat;     /* por defecto es repeat */
}

Con cover, la posición decide qué parte se recorta. Si en la foto de tu rocódromo la escaladora está arriba, background-position: center top evita que le cortes la cabeza.

background-repeat acepta repeat (mosaico, el valor por defecto), no-repeat, repeat-x, repeat-y, space y round.

Fondo fijo: background-attachment

.paralaje {
  background-image: url("img/bosque.jpg");
  background-attachment: fixed;  /* la imagen no se mueve al hacer scroll */
  background-size: cover;
}

Crea un efecto de “ventana” al hacer scroll. Cuidado: Safari en iPhone lo ignora y se comporta como scroll, así que no confíes en él para nada importante.

Varios fondos a la vez

Puedes apilar varios fondos separados por comas. El primero de la lista queda encima:

.portada {
  background-image:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), /* capa oscura encima */
    url("img/portada.jpg");                               /* foto debajo */
  background-size: cover;
}

Este truco es muy útil: oscurecer una foto con un degradado semitransparente hace que el texto blanco de encima sea legible.

El atajo background

Todo junto en una línea. El tamaño va después de la posición, separado por una barra:

.portada {
  background: #1b2d34 url("img/portada.jpg") center / cover no-repeat;
}

Cuidado: el atajo reinicia todas las propiedades que no escribas. Si pones background-size: cover; y después background: url(...), el tamaño vuelve a auto. Escribe primero el atajo y luego las propiedades sueltas.

Degradados sin imágenes

Un degradado en CSS es una imagen generada por el navegador. Por eso se usa con background-image (o background), nunca con background-color.

linear-gradient: en línea recta

.a { background: linear-gradient(#2d6cdf, #8e44ad); }            /* de arriba abajo */
.b { background: linear-gradient(to right, #2d6cdf, #8e44ad); }  /* de izquierda a derecha */
.c { background: linear-gradient(135deg, #2d6cdf, #8e44ad); }    /* en diagonal */
.d { background: linear-gradient(to right, red, orange, yellow, green); } /* varios colores */

Puedes indicar dónde empieza cada color. Si dos colores comparten posición, el cambio es brusco y obtienes rayas:

.progreso {
  /* 70 % verde y 30 % gris, sin transición */
  background: linear-gradient(to right, #2ecc71 70%, #e0e0e0 70%);
}

.rayas {
  background: repeating-linear-gradient(45deg, #ffd166 0 10px, #1b2d34 10px 20px);
}

radial-gradient: desde un punto

.foco { background: radial-gradient(circle, #fff3b0, #f4a261); }
.brillo { background: radial-gradient(circle at top left, #ffffff80, transparent 60%); }

La forma puede ser circle o ellipse (por defecto), y con at eliges el centro.

conic-gradient: alrededor de un punto

Los colores giran como las agujas de un reloj. Es perfecto para gráficos de tarta sin JavaScript:

.tarta {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #2d6cdf 0 45%,     /* 45 % aprobados */
    #f4a261 45% 80%,   /* 35 % pendientes */
    #e63946 80% 100%   /* 20 % suspensos */
  );
}

Texto con degradado

Un truco popular: recortar el fondo con la forma del texto.

.titulo-degradado {
  background: linear-gradient(90deg, #2d6cdf, #e63946);
  -webkit-background-clip: text;  /* aún necesario en algunos navegadores */
  background-clip: text;
  color: transparent;
}

Bordes

Los bordes ya aparecen en la lección del modelo de caja, donde se explica que forman parte del tamaño de la caja. Aquí vamos a sus detalles.

Estilos y lados

.aviso {
  border: 2px solid #e63946;          /* grosor, estilo, color */
}
.cita {
  border-left: 4px solid #2d6cdf;     /* solo un lado */
}
.cupon {
  border: 2px dashed #999;            /* rayas: parece recortable */
}
.pie {
  border-top: 1px solid #ddd;
  border-bottom: 3px double #ddd;     /* doble línea */
}

Los estilos más usados son solid, dashed, dotted y double. Sin estilo no hay borde: border: 2px red no muestra nada porque falta solid.

Puedes cambiar solo una parte de un lado, por ejemplo el color del borde superior: border-top-color: #2d6cdf;.

Esquinas redondeadas: border-radius

.tarjeta   { border-radius: 12px; }            /* las cuatro esquinas */
.pestania  { border-radius: 8px 8px 0 0; }     /* solo las de arriba */
.avatar    { border-radius: 50%; }             /* círculo, si la caja es cuadrada */
.etiqueta  { border-radius: 999px; }           /* píldora */

El orden, igual que en margin, empieza arriba a la izquierda y va en el sentido de las agujas del reloj.

¿Por qué 999px para una píldora y no 50%? Porque 50% se calcula por separado en ancho y alto: en una caja rectangular sale una elipse. Un valor enorme en píxeles se limita automáticamente a la mitad del lado más corto y deja los extremos perfectamente redondos.

border-radius funciona aunque no haya borde: recorta también el fondo. Si el contenido (una imagen, por ejemplo) se sale por las esquinas, añade overflow: hidden al contenedor.

outline frente a border

	border	outline
Ocupa espacio	Sí, empuja el contenido	No, se dibuja por encima
Lados por separado	Sí (border-left…)	No, siempre los cuatro
Separación	No	Sí, con outline-offset
Uso típico	Diseño	Marcar el foco del teclado

.boton:focus-visible {
  outline: 3px solid #2d6cdf;
  outline-offset: 3px;   /* un pequeño hueco entre el botón y el contorno */
}

Como outline no ocupa espacio, al aparecer no mueve nada de la página. Los navegadores actuales ya hacen que siga las esquinas redondeadas del border-radius.

Sombras

box-shadow: sombra de la caja

.tarjeta {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  /*          x  y  desenfoque  color */
}

Los valores, en orden:

1. Desplazamiento horizontal (positivo, a la derecha).
2. Desplazamiento vertical (positivo, hacia abajo).
3. Desenfoque (opcional): cuanto mayor, más difusa.
4. Expansión (opcional): agranda o encoge la sombra.
5. Color: casi siempre negro con poca opacidad.

.plana    { box-shadow: 4px 4px 0 #1b2d34; }               /* sin desenfoque: estilo cómic */
.aura     { box-shadow: 0 0 0 4px rgb(45 108 223 / 0.4); } /* solo expansión: un anillo */
.hundida  { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2); } /* hacia dentro */

Con inset la sombra se dibuja por dentro, como si la caja estuviera hundida. Queda muy bien en campos de formulario.

Varias sombras

Separadas por comas, como los fondos. Combinar una sombra pequeña y nítida con otra grande y difusa imita mejor la luz real:

.tarjeta {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.08),   /* sombra de contacto */
    0 8px 24px rgb(0 0 0 / 0.08);  /* sombra ambiental */
}
.tarjeta:hover {
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.1),
    0 16px 32px rgb(0 0 0 / 0.12);  /* parece que se eleva */
}

Consejo: las sombras de colores oscuros intensos (#000 sin transparencia) quedan “sucias”. Usa negro con un 10-20 % de opacidad o un tono oscuro del color de fondo.

text-shadow: sombra del texto

Igual que box-shadow, pero sin expansión ni inset:

.portada h1 {
  color: white;
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.4);  /* se lee sobre fotos claras */
}
.neon {
  color: #fff;
  text-shadow: 0 0 4px #0ff, 0 0 12px #0ff;  /* efecto neón */
}

Úsala con moderación: una sombra sutil mejora la legibilidad sobre una foto; una sombra exagerada la empeora.

Transparencia: opacity o rgb() con alfa

Hay dos formas de hacer algo semitransparente, y no hacen lo mismo:

.capa-a { background: rgb(0 0 0 / 0.5); }  /* solo el FONDO es transparente */
.capa-b { background: black; opacity: 0.5; } /* TODO: fondo, texto, bordes, hijos */

Si quieres un rótulo sobre una foto con el fondo translúcido pero el texto bien nítido, usa el color con alfa. opacity es para hacer desaparecer un elemento entero, por ejemplo en una animación de entrada o para un botón desactivado.

Además, un elemento con opacity menor que 1 crea un nuevo contexto de apilamiento, lo que puede afectar al z-index de sus hijos (lo tienes en posicionamiento).

Errores frecuentes

• Usar background-color con un degradado. background-color: linear-gradient(...) no hace nada: un degradado es una imagen. Usa background o background-image.
• La imagen de fondo no aparece. La ruta de url() es relativa al archivo CSS, no al HTML. Si el CSS está en css/estilos.css y la imagen en img/, la ruta es url("../img/foto.jpg").
• Un elemento vacío con fondo no se ve. Un <div> sin contenido mide 0 de alto. Dale altura, aspect-ratio o contenido.
• Borde sin estilo. border: 1px #ccc no pinta nada. Falta solid.
• Quitar el outline del foco. outline: none sin alternativa deja a quien navega con teclado sin saber dónde está.
• Poner el atajo background después de background-size. El atajo lo reinicia.
• Abusar de las sombras. Si todo tiene sombra, nada destaca.

Resumen

Propiedad	Para qué sirve	Ejemplo
background-image	Imagen o degradado de fondo	url("foto.jpg")
background-size	Tamaño del fondo	cover, contain
background-position	Qué parte se ve	center top
background-repeat	Mosaico o no	no-repeat
linear-gradient()	Degradado en línea	linear-gradient(135deg, a, b)
radial-gradient()	Degradado circular	radial-gradient(circle, a, b)
conic-gradient()	Degradado en giro	Gráficos de tarta
border	Borde	2px solid #ccc
border-radius	Esquinas redondeadas	50%, 999px
outline	Contorno que no ocupa espacio	Foco del teclado
box-shadow	Sombra de la caja	0 4px 12px rgb(0 0 0 / 0.15)
text-shadow	Sombra del texto	0 2px 4px rgb(0 0 0 / 0.4)
opacity	Transparencia de todo el elemento	0.5

Con fondos, bordes y sombras ya puedes dar un acabado profesional a tarjetas, botones y cabeceras. El siguiente paso es cuidar el texto: sigue con textos y tipografía.

.cabecera {
  background-color: linear-gradient(to right, #2d6cdf, #8e44ad);
}

.portada {
  background-image:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
    url("portada.jpg");
}