Usa el Generador de Sombras CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Que hace la sombra de caja
La sombra de caja dibuja una sombra detras de un elemento, y ese solo efecto transmite mucho significado de diseno. Una sombra pequena y suave dice “esta tarjeta flota un poco sobre la pagina”. Una sombra grande y difusa dice “este dialogo es importante y esta separado”. Ninguna sombra dice “esto es contenido plano”. Los usuarios leen estas senales al instante, por eso la sombra es de lo primero que ajustan los disenadores y de lo ultimo que entienden los principiantes.
Una sombra tiene cinco numeros: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de extension y color. Los desplazamientos mueven la sombra lejos del elemento. El desenfoque suaviza su borde. La extension la agranda o la encoge. El color, combinado con la opacidad, decide cuanto peso se siente. Una palabra opcional, inset, invierte la sombra dentro del elemento, convirtiendola en un brillo interior o un aspecto hundido en vez de flotante.
Como usar la herramienta
Arrastra los controles y mira la caja de vista previa. X mueve la sombra a izquierda y derecha, Y la mueve arriba y abajo, el desenfoque la suaviza, y la extension la expande mas alla de los bordes de la caja. Elige un color y pon la opacidad: negro al 30% es un valor seguro para paginas claras, mientras un color tenidido, como un azul oscuro con poca opacidad, suele verse mas natural que el negro puro. Marca inset para ver la sombra dibujada dentro de la caja.
Cuando la sombra se vea bien, copia la linea CSS. Es un solo valor box-shadow, asi que entra en cualquier hoja de estilos. La caja de vista previa es sencilla a proposito para que juzgues la sombra misma, no un ejemplo decorado que esconda lo que la sombra esta haciendo.
Desplazamientos y direccion de la luz
Las sombras implican una fuente de luz, y una direccion de luz coherente es lo que hace que una pagina se sienta coherente. Si la sombra de una tarjeta cae abajo y a la derecha mientras la de otra cae arriba y a la izquierda, la pagina se siente sutilmente mal aunque nadie pueda decir por que. Elige una direccion, normalmente abajo y un poco a la derecha, y usala en todas partes. Los valores Y positivos empujan la sombra hacia abajo, lo que corresponde a luz que viene desde arriba, como experimentamos la luz en el mundo real.
Los desplazamientos negativos tienen sus usos. Un Y negativo levanta la sombra sobre el elemento, lo que sirve para una barra anclada abajo o un mensaje que apunta hacia abajo. Un X negativo refleja el efecto en horizontal. Estas son excepciones, no valores por defecto: usalas cuando la posicion del elemento lo exija, y mantena el resto de la pagina coherente.
Desenfoque y extension
El desenfoque es el control de suavidad. Cero desenfoque da una sombra de borde duro que parece una copia solida desplazada de la caja, lo que sirve para estilos retro o brutalistas pero rara vez para tarjetas. Valores pequenos de desenfoque, de 4 a 8 pixeles, dan una sombra nitida y cercana. Valores grandes, de 24 a 48 pixeles, dan un resplandor suave y distante. Como regla, un desenfoque mayor combina con menor opacidad: una sombra enorme y suave a opacidad total parece niebla, no elevacion.
La extension es el control de tamano, y a menudo se entiende mal. Una extension positiva hace la sombra mas grande que la caja en todas direcciones, lo que se lee como resplandor o halo parecido a un borde. Una extension negativa la encoge, asi que la sombra solo asoma un poco, lo cual sirve para una elevacion sutil y ajustada en elementos pequenos. La mayoria de sombras de tarjeta usan extension cero y dejan que el desenfoque haga el suavizado.
Color y opacidad
El color de la sombra importa mas de lo que la gente espera. Las sombras negras puras se ven duras sobre fondos de color y turbias sobre fondos calidos. Una sombra tenida con el tono dominante de la pagina, con poca opacidad, se integra. En una pagina de tono azul, una sombra azul marino oscuro al 15% de opacidad se ve disenada, mientras negro al 30% se ve estampado. En paginas oscuras, las sombras apenas se ven, asi que considera un resplandor mas claro o un borde en su lugar.
Sombras inset
Las sombras inset se dibujan dentro del borde del elemento, lo que invierte el significado: en vez de flotar sobre la pagina, el elemento parece hundido o hueco. Sirven para campos de entrada, donde una ligera sombra interior sugiere un area hundida donde escribir, y para estados pulsados de botones, donde el cambio de sombra al pulsar da respuesta tactil. Las sombras inset tambien crean brillos interiores cuando se combinan con un color claro, utiles para resaltar un panel seleccionado.
Rendimiento y errores
Las sombras de caja son baratas para elementos estaticos pero caras cuando se animan, porque el navegador repinta la sombra en cada fotograma. Si animas la elevacion de una tarjeta al pasar el raton, anima transform y opacity en su lugar, o acepta un coste pequeno para un elemento cada vez. Los valores grandes de desenfoque en muchos elementos tambien se acumulan, asi que manten las sombras modestas en listas largas.
Herramientas relacionadas
- CSS Box Shadow Generator (English version)
- Generador de Border Radius CSS
- Calculadora de clamp() CSS