Generador de sombres CSS
Genera sombres CSS
Com usar Generador de sombres CSS
Genera sombres CSS Eina gratuïta en línia, sense registre, sense anuncis intrusius. Utilitza-la ara.
Per a qué s'utilitzen les ombres CSS?
Les ombres afegeixen profunditat, elevació i jerarquia visual a les interfícies. El Material Design de Google, les Human Interface Guidelines d'Apple i la majoria dels sistemes de disseny moderns utilitzen les ombres sistemàticament per transmetre quins elements estan més a prop de l'usuari — creant una sensació de profunditat tridimensional en les interfícies planes.
- Elevació de targetes: Una ombra subtil en un component de targeta l'eleva del fons, senyalant que és una unitat de contingut interactiva o independent. Les ombres més profundes indiquen una elevació superior — com els botons d'acció flotants (FAB) en el Material Design de Google.
- Ombres de modals i desplegables: Els overlays (modals, menús desplegables, tooltips) fan servir ombres fortes per indicar que floten per sobre del contingut de la pàgina — creant una jerarquia visual clara de profunditat.
- Indicadors de focus: Les box-shadows poden substituir les outlines per als estats de focus:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)crea un anell de focus visible sense afectar la maquetació — tècnica habitual en els sistemes de disseny accessibles. - Llegibilitat del text: Una text-shadow subtil en text blanc sobre una imatge garanteix la llegibilitat independentment del contingut de la imatge darrere — sense necessitar un overlay de color sòlid que taparia la imatge.
- Neomorfisme: L'estil de disseny neomòrfic utilitza ombres dobles — una ombra clara d'un costat i una de fosca de l'altre — per crear un efecte 3D extrudit o incrustat que sembla esculpit en el fons.
Sintaxi de box-shadow: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Es poden apilar múltiples ombres: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — tècnica usada en el Material Design de Google per a ombres naturals multicapa.
Frequently Asked Questions
Quina diferència hi ha entre box-shadow i drop-shadow()?
box-shadow s'aplica a la caixa rectangular de l'element — no segueix les formes irregulars com les imatges PNG amb fons transparent. La funció de filtre CSS drop-shadow() segueix la forma renderitzada real, incloses les zones transparents. Feu servir drop-shadow() per a icones i imatges amb transparència; box-shadow per als elements rectangulars com les targetes i els botons.
Qué fa la paraula clau 'inset'?
La paraula clau inset fa que l'ombra aparegui dins de l'element en lloc de fora. Una ombra inset crea l'aparença d'un element enfonsat o premut — útil per als estats de botó premut, els camps d'entrada (efecte de profunditat interior) o els elements d'interfície neomòrfica incrustats.
Qué és el spread radius en box-shadow?
El quart valor en box-shadow és el radi d'expansió — expandeix o contrau l'ombra. Un valor positiu fa l'ombra més gran que l'element; un valor negatiu la fa més petita. Establir offset-x i offset-y a 0 amb una expansió positiva crea un efecte de contorn/brillantor uniforme al voltant de l'element.
Per qué la meva ombra sembla diferent a Safari que a Chrome?
Les diferències de renderització d'ombres entre navegadors solen ser degudes al renderitzat de subpíxels i la correcció gamma. Safari i Chrome fan servir algoritmes de composició lleugerament diferents. Per obtenir resultats consistents entre navegadors, feu servir colors RGBA amb valors alfa explícits en lloc d'opacity, i proveu les ombres en tots dos motors de renderització.
Quantes box-shadows es poden apilar?
No hi ha un límit estricte — podeu apilar múltiples box-shadows amb una llista separada per comes. Múltiples ombres apilades amb radis de desenfocament i opacitats diferentes creen ombres d'aparença més natural que imiten la il·luminació del món real. El Material Design de Google defineix receptes d'ombres multicapa específiques per a cada nivell d'elevació.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow afegeix una ombra fora (o dins amb inset) de la caixa — no afecta la maquetació. outline dibuixa una línia fora del vora — tampoc afecta la maquetació, habitualment usada per als indicadors de focus accessibles. border afegeix una línia dins de l'element — afecta la maquetació. filter: drop-shadow() segueix la forma renderitzada real de l'element, incloses les transparències. Per a l'elevació i la profunditat de la interfície d'usuari: box-shadow. Per als anells de focus: outline o box-shadow. Per a les ombres d'icones: drop-shadow().