Generador d'ombres de caixa CSS (multi-cap & inserció)
Disseny de les ombres dels quadres CSS suaus i multicapa amb desenfocament en viu, propagació, intercanvi d'insets i exportació del codi Tailwind / CSS amb un clic.
S'executa al teu navegador. Els fitxers mai no surten del dispositiu. Mira com comprovar-ho
…
Com es fa
- 1Pas 1: obre Generador d'ombres de caixa CSS (multi-cap & inserció) i introdueix les teves dades
Escriu els teus nombres o text, afegeix el fitxer o tria les opcions que necessites. No es puja res: tot es queda al teu navegador.
- 2Pas 2: què fa Generador d'ombres de caixa CSS (multi-cap & inserció)
Disseny de les ombres dels quadres CSS suaus i multicapa amb desenfocament en viu, propagació, intercanvi d'insets i exportació del codi Tailwind / CSS amb un clic.
- 3Pas 3: llegeix el resultat i compara'l
El resultat apareix a l'instant. Canvia un valor per veure com varia la resposta i queda't amb la xifra que s'adapti al teu cas.
- 4Pas 4: copia'l o desa'l
Copia el resultat o descarrega'l. Per a una decisió important, confirma'l amb la font oficial o amb un assessor.
Sobre aquesta eina
Add depth and tactile elevation to cards and UI elements. Customize horizontal/vertical offsets, blur radius, spread distance, and shadow color with opacity slider. Test against light and dark backgrounds, toggle inset shadows for pressed button states, and copy standard CSS or Tailwind classes instantly.
Consells per obtenir el millor resultat
Abans de començar, dedica un moment a llegir les opcions i prova l'eina primer amb un exemple petit. Tot s'executa al navegador del teu dispositiu; res del que escrius o afegeixes es puja i tancar la pestanya ho esborra tot. Si alguna cosa no et sembla bé, recarrega la pàgina i torna-ho a provar, o fes servir l'enllaç d'informe d'aquesta pàgina per dir-nos què ha anat malament. Si un resultat continua semblant erroni, canvia un valor cada vegada per veure quin camp influeix més. Afegeix aquesta pàgina als preferits si la tornaràs a fer servir.
En resum
- Categoria: Imatges
- S'executa al navegador, sense registre, sense pujar res.
- La informació que introdueixes es queda al dispositiu.
- Disponible en molts idiomes.
- Contingut revisat per última vegada:
Preguntes freqüents
Com faig per crear una ombra suau i moderna?
Utilitza un radi de borrós més gran (20px-40px), una difusió negativa (-4px) i una opacitat baixa (10%-25%) en un color d'escriptura fosca per a una ombra ultra-llissa.
Aquest suport inserta ombres interiors?
Sí, habilitar el canvi 'Insert Shadow' per generar efectes d'ombra interior ideal per a camps d'entrada, pous i estats de botons pressionats.
Puc provar com es veu l'ombra en les targetes de mode fosc?
Fes clic en "Tombada fosca" per provar el contrast d'ombra sobre fons foscos i profunds.
És el CSS generat compatible amb tots els navegadors?
Sí, genera una sintaxi de box-shadow estàndard compatible amb el W3C i suportada per tots els navegadors moderns.