Generador de sombras

Mueves X, Y, blur y un color semitransparente y copias la regla CSS. Sirve para elevar un botón o una tarjeta. No exporta a Figma ni sustituye un token de diseño.

Estás maquetando una card de precios y el box-shadow del tutorial queda o invisible o como un manchón. Coddy y UtiloKit ya llenan «generador box-shadow» en español; aquí el trabajo es una sombra usable para pegar en tu CSS, no un sistema de tokens.

La regla clásica es offset-x offset-y blur spread color. Un Y positivo y poco X simula luz de techo. inset hunde el control (inputs). Esta página no pinta sombras de texto (text-shadow) ni filtros SVG.

Cómo dejarla creíble

1. Empieza con Y 8–16 px, blur 20–32, spread 0, negro al 10 %.
2. Mira la vista previa sobre un fondo parecido al de tu landing (el gris de Figma miente).
3. Copia el CSS. Si el texto encima no se lee, el problema es contraste: comprobador de contraste.

box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);

Límites

• No exporta a Tailwind como plugin ni a tokens DTCG.
• No sustituye la elevación de Material o el shadow-sm de un kit.
• Una sombra enorme en móvil cuesta pintura: no es un bug de esta pestaña.

CSS local. El diseño del producto sigue siendo tuyo.