Générateur d'Ombre CSS Gratuit en Ligne
Construisez des ombres CSS visuellement avec des contrôles de décalage, flou, étendue et couleur.
Who uses the Générateur d'Ombre CSS?
- Développeurs UI générant des ombres de cartes et de boutons conformes aux spécifications de leur système de design.
- Apprenants CSS explorant les propriétés d'ombre via une interface visuelle à retour instantané.
- Designers créant et testant des effets d'ombre pour des maquettes avant de les transmettre aux développeurs.
How the Générateur d'Ombre CSS works
Ajustez les curseurs de décalage X, décalage Y, rayon de flou et rayon d'étalement pour façonner votre ombre.
Cliquez sur le carré de couleur pour choisir une couleur d'ombre, et utilisez le curseur d'opacité à côté.
Activez Inset pour un effet d'ombre intérieure.
Copiez le CSS depuis le panneau de sortie de code.
Tips & tricks
- Cet outil génère une seule couche d'ombre — pour un effet multi-couches (comme l'élévation Material Design), générez chaque couche ici séparément et combinez-les avec des virgules manuellement.
- Un étalement négatif avec un flou plus important crée une ombre douce et diffuse qui paraît plus « flottante » qu'une ombre à étalement positif serré.
- Les ombres intérieures fonctionnent bien pour les états de bouton pressé — essayez un léger flou avec une couleur sombre à faible opacité.
- Le curseur d'opacité contrôle le canal alpha de la couleur de l'ombre, pas l'opacité de l'élément lui-même.
Frequently Asked Questions
Quelle est la syntaxe CSS box-shadow ?
box-shadow: [inset] décalage-X décalage-Y rayon-flou rayon-étalement couleur. Exemple : box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Plusieurs ombres sont séparées par des virgules.
Que fait le rayon d'étalement ?
Le rayon d'étalement agrandit ou rétrécit l'ombre avant le flou. Des valeurs positives font grandir l'ombre au-delà de l'élément ; des valeurs négatives la réduisent. Un étalement de -4px avec un flou de 8px crée une ombre focalisée et directionnelle.
Qu'est-ce qu'une ombre intérieure (inset) ?
Cocher la case Inset fait apparaître l'ombre à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur. Les ombres intérieures créent des états de bouton enfoncé/pressé, des effets de carte incrustée et des lueurs internes.
Cet outil peut-il générer plusieurs couches d'ombre empilées, comme l'élévation Material Design ?
Non — cet outil génère une couche d'ombre à la fois. Pour un effet à plusieurs couches comme l'élévation Material Design (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)), générez chaque couche ici séparément et combinez les valeurs séparées par des virgules manuellement.
box-shadow affecte-t-il la mise en page et occupe-t-il de l'espace ?
Non. Contrairement à margin ou padding, box-shadow n'affecte pas la mise en page — les éléments avec des ombres ne repoussent pas les éléments voisins. Cela rend les ombres sûres à ajouter sans perturber la mise en page de la page.
Is my data safe when using the Générateur d'Ombre CSS?
Completely safe. The Générateur d'Ombre CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Générateur d'Ombre CSS output in commercial projects?
Yes. The Générateur d'Ombre CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Générateur d'Ombre CSS follow official standards?
Yes. The Générateur d'Ombre CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.