Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur d'ombres CSS

CSS Box Shadow Generator

Réglez décalages, flou, étendue, couleur et opacité d'une ombre, en mode externe ou inset, et copiez la déclaration box-shadow exacte aperçue en direct.

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

Positionnez l'ombre

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur d'ombres CSS, confidentialité et outils associés

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

Comment construire une ombre CSS box-shadow

  1. 01

    Positionnez l'ombre

    Réglez le Décalage horizontal et le Décalage vertical, chacun de -80 à 80 px. Les valeurs négatives poussent l'ombre vers la gauche ou vers le haut ; zéro la centre derrière la carte. L'espace de travail s'ouvre à 12 px à droite et 18 px vers le bas, un placement d'ombre portée classique.

  2. 02

    Réglez le flou et l'étendue

    Ajustez le Rayon de flou de 0 à 120 px pour la douceur — la valeur par défaut est 32 px — et le Rayon d'étendue de -40 à 60 px pour agrandir ou rétrécir l'ombre avant l'application du flou. L'étendue par défaut de -4 px resserre légèrement l'ombre pour un bord plus net.

  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.

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.
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 ?
Cet espace de travail règle une ombre à la fois pour que chaque valeur reste explicite. Pour superposer plusieurs ombres, copiez la déclaration, ajustez les valeurs et copiez à nouveau — le CSS accepte une liste d'ombres séparées par des virgules sur une même propriété, et une ombre d'ambiance douce plus une ombre de contact serrée forment une combinaison courante.
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 ?
Le Décalage horizontal et le Décalage vertical vont de -80 à 80 px, le Rayon de flou de 0 à 120 px, le Rayon d'étendue de -40 à 60 px, et l'Opacité de l'ombre de 0 à 1. Les valeurs hors limites sont signalées par VÉRIFIER LES VALEURS et bloquent la copie jusqu'à correction.
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.

Continuer dans Design

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

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

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer