Aller au contenu
Toolars
Explorer

Générateur d'ombres CSS

CSS Box Shadow Generator

Une à huit ombres, avec décalage, flou, étalement, couleur, opacité et inset indépendants.

Traitement local

Détails du traitement

Les données de l’outil sont traitées sur votre appareil.

Des ressources peuvent être téléchargées pour cet outil. Les services de compte sont distincts.

Informations sur la confidentialité
Signaler un bug

Parcours de la tâche / de l'entrée au résultat

Comment construire une ombre CSS box-shadow

  1. 01

    Positionnez l'ombre

    1–8 Calques d’ombre · X/Y (px): −100…100 · Flou (px): 0–100 · Étendue (px): −100…100 · Couleur · Opacité: 0–1 · inset

  2. 02

    Réglez le flou et l'étendue

    Une à huit ombres, avec décalage, flou, étalement, couleur, opacité et inset indépendants.

  3. 03

    Définissez la couleur et l'opacité

    Choisissez une Couleur d'ombre à six chiffres — la valeur par défaut #0b0d12 est un quasi-noir — et réglez l'Opacité de l'ombre de 0 à 1 par pas de 0.01. L'opacité devient le canal alpha de la couleur rgba() en sortie, donc 0.28 s'affiche comme rgba(11, 13, 18, 0.28).

  4. 04

    Basculez le mode inset

    Activez Ombre interne pour déplacer l'ombre à l'intérieur de la boîte, ce qui se lit comme une surface enfoncée ou en retrait — utile pour les champs de saisie et les boutons basculés. La déclaration générée ajoute le mot-clé inset en tête quand l'interrupteur est actif.

  5. 05

    Comparez avec l'exemple

    Cliquez sur Charger un exemple pour un style de référence tranchant : un décalage de 8 px sur les deux axes sans flou ni étendue, en #0f4cff à 0.35 d'opacité — un contour décalé aux bords francs. Réinitialiser ramène l'ombre douce par défaut, et l'aperçu en direct se re-rend à chaque modification.

  6. 06

    Copiez ou téléchargez le CSS

    Cliquez sur Copier le CSS pour copier la règle .shadow-card, ou sur Télécharger le .css pour l'enregistrer sous toolars-box-shadow.css. La copie est bloquée tant qu'une valeur est hors limites, donc la déclaration que vous collez est toujours valide. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur d'ombres CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur d'ombres CSS fait vraiment

L'élévation est facile à ressentir et difficile à deviner : une carte de tarifs qui devrait flotter juste au-dessus de la page, une modale qui demande une vraie profondeur, un bouton pressé qui se lit comme enfoncé. Écrire décalages, flou et étendue à l'aveugle oblige à recharger la page à chaque ajustement. Générateur d'ombres CSS montre le résultat exact pendant que vous faites glisser chaque curseur, d'un léger relief à 0.28 d'opacité à un contour décalé aux bords francs. La déclaration copiée entre directement dans une feuille de style — le tout calculé localement dans l'onglet.

Questions fréquentes

À quoi correspondent les curseurs dans le CSS ?
La sortie suit l'ordre de box-shadow : décalage horizontal, décalage vertical, rayon de flou, rayon d'étendue, puis la couleur. L'Opacité de l'ombre devient le canal alpha d'une couleur rgba(), et l'interrupteur Ombre interne ajoute le mot-clé inset en tête de toute la valeur. Une à huit ombres, avec décalage, flou, étalement, couleur, opacité et inset indépendants. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.
Que fait un rayon d'étendue négatif ?
Il rétrécit l'ombre de tous les côtés avant l'application du flou, ce qui empêche un grand flou de déborder trop loin des bords de l'élément. L'étendue par défaut de -4 px est exactement cette astuce : un flou doux de 32 px qui épouse quand même la carte au lieu de diffuser vers l'extérieur.
Puis-je empiler plusieurs ombres en une exécution ?
Une à huit ombres, avec décalage, flou, étalement, couleur, opacité et inset indépendants. Ajouter / Supprimer · 1–8 Calques d’ombre
Quand utiliser une ombre interne ?
Une ombre interne se rend à l'intérieur de la bordure de l'élément, donc la surface paraît enfoncée ou en retrait plutôt que soulevée. Elle convient aux champs de texte, aux puits et aux boutons activés. Basculez Ombre interne et l'aperçu montre immédiatement l'effet — la règle copiée gagne simplement le mot-clé inset.
Quelles sont les plages de valeurs ?
1–8 Calques d’ombre · X/Y (px): −100…100 · Flou (px): 0–100 · Étendue (px): −100…100 · Couleur · Opacité: 0–1 · inset. Vérifiez source, commandes et validation avant l’export. Un résultat invalide ne peut pas être exporté.
Quelque chose est-il téléversé ou stocké ?
Non. Tout est rendu dans cet onglet du navigateur à partir de valeurs de style validées, et aucune valeur générée n'entre dans le stockage, les journaux, les analytics ou le réseau.

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur de cases à cocher CSS

CSS Checkbox Generator

24 modèles de cases : huit marques × trois transitions ; tester l’aperçu natif au clic ou avec Espace.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

18 modèles d’interrupteurs : six curseurs × trois transitions ; tester au clic ou au clavier.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

24 formes de découpe, paramètres et points de polygone modifiables ; exporter CSS ou une déclaration.

Créer