Créez de magnifiques ombres CSS avec un éditeur visuel en temps réel. Ajustez le décalage, le flou, l'expansion et la couleur — copiez le code CSS prêt à l'emploi instantanément. 100% gratuit et côté client.
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);Le Générateur d'Ombres CSS est un outil visuel pour créer de belles ombres portées autour des éléments HTML. Contrairement aux bibliothèques d'ombres statiques, cet outil vous permet d'affiner chaque paramètre — décalage horizontal, décalage vertical, rayon de flou, rayon d'expansion et couleur — en temps réel. Il génère une syntaxe CSS standard compatible avec tous les navigateurs modernes. Tout fonctionne dans votre navigateur — aucune donnée n'est envoyée ailleurs.
Une ombre CSS est un effet visuel qui ajoute une ombre autour du cadre d'un élément HTML. Elle est définie par la propriété box-shadow et se compose d'un décalage horizontal, d'un décalage vertical, d'un rayon de flou, d'un rayon d'expansion et d'une couleur. Les ombres créent de la profondeur, de l'élévation et une hiérarchie visuelle dans les designs web.
Le rayon d'expansion contrôle la taille de l'ombre. Une valeur positive l'agrandit, la rendant plus grande que l'élément lui-même. Une valeur négative la réduit. C'est le paramètre clé pour créer des ombres dures et bien définies par opposition à des ombres douces et diffuses.
Une ombre intérieure apparaît à l'intérieur de la bordure de l'élément, créant l'illusion de profondeur ou d'un biseautage intérieur. Elle est couramment utilisée pour les effets de bouton enfoncé, le gaufrage de cartes et les lueurs intérieures. Activez l'option "Ombre Intérieure" pour basculer entre les ombres extérieures et intérieures.
Oui. La syntaxe box-shadow générée suit le standard CSS et fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et les navigateurs mobiles. Aucun préfixe vendeur n'est nécessaire dans les versions actuelles.