Fondos, Bordes y Efectos Visuales

Fondos y Gradientes

Usa gradientes e imágenes para agregar profundidad y estilo:

.card {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.hero {
  background-image: url("/hero.jpg");
  background-size: cover;
  background-position: center;
}

Bordes y Radio

.panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.pill {
  border-radius: 999px;
}

Sombras de Caja

Las sombras crean jerarquía y profundidad:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

Filtros y Filtros de Fondo

Agrega acabado con desenfoque o brillo sutil:

.glass {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.5);
}

.image {
  filter: grayscale(30%) contrast(110%);
}