Points clés
- 01Chaque paramètre de box-shadow dispose de son propre curseur plus une entrée numérique pour un réglage au pixel près.
- 02Le bouton inset bascule entre l'ombre portée et l'ombre intérieure pour les effets enfoncés ou neumorphiques.
- 03La couleur et l'opacité sont contrôlées séparément, générant rgba() pour un CSS lisible.
- 04L'aperçu utilise la vraie propriété CSS sur un vrai élément — ce que vous voyez est exactement ce que votre feuille de style affiche.
Pourquoi utiliser un générateur box-shadow visuel
CSS box-shadow accepte jusqu'à six valeurs — décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement, couleur et le mot-clé inset optionnel. Les taper de mémoire fonctionne pour les ombres simples, mais pour quelque chose de plus nuancé — une lueur serrée, une ombre portée profonde, une couche d'élévation douce — vous devinez et rechargez jusqu'à ce que ça ressemble à quelque chose.
Un générateur visuel réduit cette boucle d'itération. Déplacez un curseur, voyez le changement instantanément, et copiez seulement quand vous êtes satisfait. Le générateur box-shadow de Handytool s'exécute entièrement dans votre navigateur, donc l'aperçu est la vraie propriété CSS appliquée à un vrai élément — aucune différence de rendu entre l'outil et votre page réelle.
Comment concevoir une ombre
- 01
Ajustez les décalages horizontal et vertical
Les valeurs positives déplacent l'ombre vers la droite et vers le bas. Les valeurs négatives la déplacent vers la gauche et vers le haut. Une ombre centrée (0, 0) crée un effet de lueur.
- 02
Définissez le rayon de flou
Les valeurs de flou plus élevées créent des ombres plus douces et diffuses. Un flou zéro produit un contour d'ombre dur et solide.
- 03
Ajustez le rayon d'étalement
L'étalement positif agrandit l'ombre avant le flou. L'étalement négatif la rétrécit, ce qui est utile pour les ombres serrées sous les éléments.
- 04
Choisissez une couleur et une opacité
Utilisez le sélecteur de couleur pour choisir la teinte de l'ombre, puis réduisez l'opacité pour plus de subtilité. La sortie utilise rgba() pour garder les valeurs lisibles.
- 05
Basculez inset si nécessaire
Inset bascule d'une ombre portée à une ombre intérieure — utile pour les boutons enfoncés, les entrées enfoncées et les surfaces neumorphiques.
- 06
Copiez la déclaration CSS
Cliquez sur Copier pour récupérer la valeur box-shadow complète et collez-la dans votre feuille de style.
Pas de téléchargement, pas de compte
Le générateur est entièrement côté client. Vos choix de couleur, valeurs numériques et états d'aperçu restent dans votre navigateur — rien n'est envoyé à un serveur. Il n'y a pas de compte à créer et pas de limite d'utilisation.
Parce que l'élément d'aperçu utilise la vraie propriété CSS box-shadow, la sortie est précise par définition — il n'y a pas de rendu canvas ou d'approximation par capture d'écran. Les valeurs en pixels que vous copiez sont les valeurs en pixels que le navigateur applique.
FAQ du générateur box-shadow
Que fait la valeur d'étalement ?
L'étalement positif agrandit l'ombre dans toutes les directions avant l'application du flou ; l'étalement négatif la rétrécit. Utile pour les lueurs serrées et définies lorsqu'elles sont associées à un flou faible.
Puis-je ajouter plusieurs box-shadows ?
Ce générateur génère une seule ombre à la fois. Pour les superposer, copiez la valeur et séparez plusieurs ombres par des virgules dans votre CSS — box-shadow accepte une liste séparée par des virgules.
Pourquoi mon ombre inset est-elle invisible ?
Les ombres inset se dessinent à l'intérieur de l'élément, elles ont donc besoin d'une couleur de fond ou d'un remplissage visible pour s'afficher. Elles n'apparaîtront pas sur les éléments transparents ou de taille zéro.
L'aperçu est-il précis au pixel ?
Oui — l'aperçu utilise la vraie propriété CSS box-shadow sur un vrai élément DOM, donc ce que vous voyez est exactement ce que votre feuille de style produira.
Qu'est-ce qu'une ombre neumorphique ?
Le neumorphisme utilise deux ombres — une claire et une sombre — décalées dans des directions opposées pour faire apparaître un élément comme surélevé ou enfoncé à partir d'une surface plate. Les deux ombres sont généralement inset pour la variante enfoncée.