BaselineLab
0Apoyar

Playground de box-shadow en CSS

Combina hasta tres sombras de caja con offset, blur, spread, color e inset, y genera el código listo para usar.

Preguntar a la IA

Playground de box-shadow en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Superficie con capas
HTML
<div class="box-shadow-sample">Superficie con capas</div>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<div class="box-border grid min-h-[14rem] w-full max-w-[22rem] place-items-center p-8 rounded-[24px] bg-[#f8fafc] text-[#172033] text-xl font-extrabold text-center [box-shadow:0px_4px_12px_-6px_#0f172a2e,0px_18px_42px_-16px_#0f172a59]">Superficie con capas</div>
CSS
.box-shadow-sample {
  box-sizing: border-box;
  inline-size: min(100%, 22rem);
  min-block-size: 14rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: 24px;
  background-color: #f8fafc;
  color: #172033;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  box-shadow:
    0px 4px 12px -6px #0f172a2e,
    0px 18px 42px -16px #0f172a59;
}