Ejercicio: Fondos, bordes, sombras y degradados

⏱ 35 minutos
📶 Nivel: principiante

Objetivo

Diseñar una tarjeta de producto con sombras en capas, degradados, color con transparencia y texto con degradado.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

pagina.html

<article class="producto">
  <div class="imagen"></div>
  <h2 class="nombre">Reloj clásico</h2>
  <p class="precio">$1,299</p>
  <button class="comprar">Añadir al carrito</button>
</article>
<div class="aviso">¡Oferta de temporada!</div>
<h1 class="logo">Degradado</h1>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<article class="producto">
  <div class="imagen"></div>
  <h2 class="nombre">Reloj clásico</h2>
  <p class="precio">$1,299</p>
  <button class="comprar">Añadir al carrito</button>
</article>
<div class="aviso">¡Oferta de temporada!</div>
<h1 class="logo">Degradado</h1>

Resultado

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; padding: 24px; background: #f1f5f9; }.
Da a .producto fondo blanco, max-width: 300px, border-radius: 16px, overflow: hidden y una sombra con dos capas (por ejemplo, 0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .12)).
Haz que .imagen mida 160px de alto con un fondo linear-gradient(135deg, #4f46e5, #22d3ee).
Haz que .nombre y .precio tengan padding: 0 16px, y el precio font-weight: 800.
Da a .comprar un fondo linear-gradient(90deg, #4f46e5, #7c3aed), texto blanco, sin borde, border-radius: 10px, padding: 10px 18px y margin: 0 16px 16px.
Haz que .aviso tenga un fondo con color translúcido rgb(79 70 229 / 15%), borde 1px solid rgb(79 70 229 / 40%) y padding: 12px 16px (no uses opacity).
Haz que .logo tenga texto con degradado linear-gradient(90deg, #4f46e5, #ec4899) usando background-clip: text y color: transparent.

💡 Pista 1: mi degradado no se ve

Los degradados van en background o background-image, no en background-color. Comprueba que lo has escrito en la propiedad correcta.

💡 Pista 2: el texto con degradado se ve negro

Necesitas las dos cosas: background-clip: text (y la versión con -webkit-) y color: transparent.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código CSS

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

estilos.css

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; padding: 24px; background: #f1f5f9; }

.producto {
  max-width: 300px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .12);
}

.imagen {
  height: 160px;
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
}

.nombre, .precio { padding: 0 16px; }
.precio { font-weight: 800; }

.comprar {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  margin: 0 16px 16px;
}

.aviso {
  background: rgb(79 70 229 / 15%);
  border: 1px solid rgb(79 70 229 / 40%);
  padding: 12px 16px;
  margin-top: 16px;
}

.logo {
  background: linear-gradient(90deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

💡 🏁 Reto extra (opcional)

Añade un efecto de cristal: pon un fondo con degradado detrás del .aviso y usa backdrop-filter: blur(8px) con un fondo translúcido. Revisa que el texto conserve el contraste.