¿Sabías que…?Pulsa ⌘K o Ctrl+K para buscar cualquier herramienta.Cada herramienta tiene su YouPet guardiana.Pulsa ⌘K o Ctrl+K para buscar cualquier herramienta.Con el corazón guardas tus herramientas favoritas.Tu YouPet evoluciona mientras usas la web.
CargandoProfundidad para tus diseños · gratis
Sombras realistas en capas, efecto vidrio, relieve suave y textos con neón o 3D. Ajusta con deslizadores, mira el resultado al momento y copia el código CSS o Tailwind.
¡Hola! Soy Sombri y cuido de esta herramienta.
.tarjeta {
background: #ffffff;
border-radius: 24px;
box-shadow: 0px 1px 2px 0px rgba(30, 27, 75, 0.1),
0px 2px 4px 0px rgba(30, 27, 75, 0.1),
0px 4px 8px 0px rgba(30, 27, 75, 0.1),
0px 8px 16px 0px rgba(30, 27, 75, 0.1),
0px 16px 32px 0px rgba(30, 27, 75, 0.1);
}Consejo: una sombra del color del fondo, pero más oscuro, se ve más natural que una gris.
Pulsa un número para ajustar esa capa a mano.
Una buena sombra dice qué está encima de qué sin que nadie lo note. Aquí la diseñas a ojo, con deslizadores, y te llevas el código exacto para tu web o tu prototipo.
Elige un estilo, prueba otro efecto y copia el código:
Elige un estilo de sombra: Suave, elevada, nítida, flotante… o la sombra realista automática: mueve la altura y la luz y se recalculan todas sus capas.