01
Distinguer flou et étalement
Ajustez le flou de l’ombre existante, puis ajoutez une couche plus courte pour le contact. Un étalement négatif réduit la surface peinte ; il ne déplace pas la couche comme un décalage vertical.
Outils HTML et CSS
Générateur CSSpour régler les effets visuels
Choisissez l’ombre, la bordure et les coins, la transformation ou le filtre ; chaque sortie reste indépendante.
Générateur CSS
Aperçu en direct
Le fond coloré sert seulement d’exemple : il ne figure pas dans le CSS exporté.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Les paramètres restent dans cet onglet ; aucune image ni aucun CSS n’est envoyé.
Paramètres de l’effet
CSS Ombre portée à jour.
Une ombre peut sembler trop large alors que sa couleur convient déjà. Le Générateur CSS sépare le flou, l’étalement et l’opacité : vous pouvez observer leur contribution sur une tuile avant d’emporter la déclaration box-shadow.
Ce Générateur CSS conserve aussi les réglages de bordure, de transformation et de filtre tant que l’onglet reste ouvert. Changer de mode permet de comparer des effets, sans inclure automatiquement les anciens réglages dans la copie.
Pourquoi utiliser ce Générateur CSS
Superposer plutôt que durcir une ombre
Un générateur d’ombre CSS limité à une seule couche ne représente pas facilement une ombre d’ambiance et un contact plus net. Ajoutez jusqu’à quatre couches, chacune avec sa couleur, son opacité et son mode interne ou externe.
Une seule propriété CSS à la fois
Le Générateur CSS garde les coins, les transformations et les filtres dans leurs modes respectifs. L’export du filtre ne contient donc ni l’ombre précédente ni la couleur de fond de l’exemple ; l’aperçu reflète la déclaration actuelle.
Trois vérifications utiles avant l’export
02
Contrôler les coins et l’ordre des fonctions
Liez les coins pour un seul rayon ou déliez-les pour quatre valeurs. La transformation suit déplacement, rotation, échelle, inclinaison ; changer cet ordre après la copie modifie le rendu.
03
Attendre une déclaration actuelle
La génération automatique attend environ 350 ms après la dernière saisie. Une fois désactivée, utilisez le bouton ou Ctrl/Cmd+Entrée. Exemple, remise à zéro et suppression d’une couche exigent une confirmation et permettent une annulation.
Quatre familles d’effets mesurables
Ombres en plusieurs couches
Le générateur d’ombre CSS règle pour chaque couche les décalages X/Y, le flou, l’étalement, la couleur hexadécimale, l’opacité et inset. Une seule déclaration box-shadow contient les couches séparées par des virgules.
Bordure et quatre rayons
Le générateur de border-radius relie les coins ou accepte un rayon px pour chacun. La largeur, le style et la couleur de bordure se règlent avec eux ; une largeur nulle produit border: none.
Transformation à ordre constant
Les transformations CSS combinent déplacement, rotation, échelle et inclinaison. Les valeurs neutres sont omises et un état entièrement neutre donne transform: none.
Filtres sans fonctions inutiles
Le générateur de filtres CSS propose flou, luminosité, contraste, saturation, gris, sépia, teinte, inversion et opacité. Les contrôles restés neutres n’alourdissent pas la sortie.
Ce que la déclaration couvre exactement
- Le mode actif seul est exporté
- Les autres valeurs restent dans cet onglet mais la copie et le fichier .css portent uniquement sur le mode choisi. Aucun sélecteur, HTML, préfixe ancien, compte ni lien de partage n’est généré.
- Des bornes pour les nombres
- L’ombre a quatre couches au maximum ; la couleur utilise six chiffres hexadécimaux. Un flou négatif ou un nombre hors plage bloque l’export et indique le champ concerné. L’étalement peut être négatif.
- Une ombre de boîte reste distincte
- box-shadow suit la boîte de l’élément, tandis que filter: drop-shadow() peut suivre une silhouette d’image. Le mode filtre ne propose ni drop-shadow ni backdrop-filter.
- Pas d’import ni d’animation
- L’outil ne relit pas un CSS collé, ne crée ni animation, ni carte 3D, ni image. Le fond de la tuile est une aide visuelle qui ne se trouve pas dans le code exporté.
Questions sur le Générateur CSS
Quelle différence entre box-shadow et filter: drop-shadow ?
box-shadow dessine l’ombre autour de la boîte CSS ; drop-shadow peut suivre les pixels opaques d’une image. Cet outil génère la première dans son mode ombre et ne propose pas la seconde.
Comment empiler plusieurs ombres ?
Ajoutez jusqu’à quatre couches. Elles sont écrites dans une seule valeur box-shadow, séparées par des virgules et dans l’ordre de la liste.
Mes données sont-elles envoyées à un serveur ?
Non. Le calcul se fait dans l’onglet et aucun fichier image n’est téléversé. Copier ou télécharger est une action locale explicite.
Faut-il créer un compte ou installer quelque chose ?
Non. Ouvrez l’outil dans un navigateur moderne ; les paramètres restent seulement dans cette session de page.
Quels sont les paramètres de box-shadow ?
Chaque couche expose les décalages horizontaux et verticaux, le flou, l’étalement, la couleur, l’opacité et le réglage inset.
Une ombre ou un filtre vous paraît incorrect ?
Essayer le Générateur CSS sur votre prochain bloc
Réglez la tuile de démonstration et copiez la seule déclaration utile à votre feuille de style.