Générateur d'ombre de boîte CSS

Une déclaration box-shadow comporte six parties mobiles – décalage X et Y, flou, propagation, couleur et le mot-clé facultatif inset – et la seule façon de les obtenir correctement est de les voir. Ce générateur place chaque partie sur un curseur et affiche le résultat sur une carte d'aperçu au fur et à mesure que vous faites glisser, de sorte que la ligne CSS en bas correspond toujours exactement à ce que vous regardez.

Les ombres du monde réel sont rarement constituées d’une seule couche. La liste des calques vous permet d'empiler jusqu'à quatre ombres dans une seule déclaration : une ligne sombre étroite pour la définition des bords plus un large lavis doux pour l'élévation, ou la paire clair et foncé qui définit le neumorphisme. Sélectionnez un calque pour le modifier, supprimez ceux dont vous n'avez pas besoin et la valeur combinée de l'ombre de la boîte est mise à jour en direct.

Les ombres se lisent très différemment sur les interfaces sombres, où une ombre noire sur une page presque noire disparaît tout simplement. La bascule d’arrière-plan d’aperçu fait basculer l’arrière-plan entre clair et sombre afin que vous puissiez vérifier les deux thèmes avant l’expédition. Les pages prédéfinies couvrent les variantes que les gens recherchent réellement : une ombre d'élévation douce, un puits encastré, la recette du neumorphisme à deux couches et une ombre de carte subtile.

Comme tous les outils de ce site, le générateur est gratuit et fonctionne entièrement dans votre navigateur : pas de téléchargement, pas de compte, et il continue de fonctionner hors ligne une fois la page chargée.