◻ Une boîte à outils,
chaque tâche de conception

Générateur d'Ombres

Générateur d'ombres de boîtes interactif avec multicouches, aperçu Canvas en temps réel et sortie CSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ Générateur d'Ombres

Guide des ombres de la boîte

Les ombres de boîte ajoutent de la profondeur aux éléments de l'interface utilisateur en simulant l'éclairage et l'élévation. Des ombres bien conçues créent une hiérarchie visuelle et rendent les interfaces plus tactiles.

Ajustez le décalage horizontal, le décalage vertical, le flou, la répartition, la couleur et l'opacité. L’aperçu Canvas est mis à jour en temps réel. Copiez le code CSS lorsque vous êtes satisfait.

Pro Tips

Frequently Asked Questions

Q: Quelle est la différence entre flou et propagation ?
Quelle est la différence entre flou et propagation ? Le flou contrôle la douceur du bord de l'ombre. Spread contrôle l’ampleur de l’expansion de l’ombre.
Q: Combien de calques d’ombre dois-je utiliser ?
Combien de calques d’ombre dois-je utiliser ? 1 à 2 couches suffisent généralement. Utilisez des ombres encastrées pour la profondeur intérieure.
Q: Combien de calques d’ombre de boîte dois-je utiliser ?
Combien de calques d’ombre de boîte dois-je utiliser ? Les conceptions professionnelles utilisent souvent 2 à 4 couches pour la profondeur. Commencez par une petite ombre serrée, ajoutez une ombre moyennement étendue et ajoutez éventuellement une grande ombre ambiante. L'outil prend en charge un nombre illimité de couches.
Q: Quel est l’impact de box-shadow sur les performances ?
Quel est l’impact de box-shadow sur les performances ? Quelques ombres de boîte ont un impact négligeable. Trop d’ombres très floues peuvent affecter les performances de défilement sur les appareils bas de gamme. L'outil affiche un aperçu en temps réel afin que vous puissiez juger avant de copier.
Q: Puis-je créer des ombres intérieures (en médaillon) ?
Puis-je créer des ombres intérieures (en médaillon) ? La version actuelle se concentre sur les ombres extérieures. Pour les ombres intérieures, ajoutez manuellement le mot-clé "inset" au début de la valeur CSS box-shadow générée.

Couleurs de France

Du bleu de France au rouge coquelicot, la palette française puise dans la mode, l'art et le patrimoine. Des couleurs élégantes et raffinées qui ont marqué l'histoire du design mondial.

Bleu de France #318CE7

Le bleu national utilisé depuis les rois capétiens

Rouge Coquelicot #FF3800

Le rouge éclatant des champs de coquelicots

Vert Émeraude #50C878

La couleur emblématique des bijoux et de la joaillerie

Jaune de Naples #FADA5E

Pigment historique des peintres depuis la Renaissance

Rose Bonbon #F9429E

Le rose sucré de la confiserie et de la mode

Bleu Roi #4169E1

Le bleu royal des armoiries et de Versailles

Bordeaux #800020

Le rouge sombre des vins de la région bordelaise

Gris Perle #B0B7C3

L'élégance discrète des intérieurs parisiens

Lavande #967BB6

Les champs de Provence en été

Crème #FFFDD0

La douceur des façades haussmanniennes

Q: Qu'est-ce que le bleu de France ?
Qu'est-ce que le bleu de France ? Le bleu de France (#318CE7) est la couleur nationale française, héritée du bleu des armoiries royales depuis le XIIe siècle, reprise aujourd'hui par les équipes sportives nationales.
Q: Qu'est-ce que le rouge coquelicot ?
Qu'est-ce que le rouge coquelicot ? Le coquelicot (#FF3800) est un rouge-orangé vif nommé d'après les fleurs de coquelicot qui fleurissent dans les champs français, popularisé par les impressionnistes.