Meilleur gratuit Générateur d'ombres CSS Box
Construisez visuellement CSS box-shadow avec aperçu en direct, inset et un deuxième calque — copiez le code.
100% gratuit
Pas d'inscription
Pas de filigrane
Fichiers traités en mémoire, jamais stockés
✨
Go Pro pour les meilleurs modèles d'IA — image, vidéo et chat — plus de chargements plus grands, priorité dans la file d'attente et sans attente.
Mise à niveau vers Pro
Amour best.free? Partagez-le
Comment ça marche
- Déplacer les curseurs. Définissez le décalage, le flou, la propagation, la couleur et l'opacité; basculez l'encastrement si vous voulez une ombre intérieure.
- Regardez l'aperçu. Les mises à jour de live box pendant que vous faites glisser; ajouter un deuxième calque dans Options avancées pour la profondeur.
- Copier le CSS. Appuyez sur Copier CSS et collez la règle de l'ombre de boîte directement dans votre feuille de style.
A propos de cet outil
Créez un ombrage de boîte sans deviner les valeurs de pixel. Faites glisser les curseurs offset-X, offset-Y, flou et écartez, choisissez une couleur d'ombre et de cadran dans son opacité, et regardez une mise à jour de boîte de prévisualisation en temps réel — puis copiez le CSS exact de boîte-ombre. Dépliez l'encastrement pour une ombre intérieure. Les options avancées empilent une deuxième couche d'ombre, afin que vous puissiez construire les ombres douces et multicouches utilisées sur les cartes et boutons modernes. Tout fonctionne dans votre navigateur.
À quoi les gens s'en servent
- Ajoutez une ombre de goutte douce aux cartes et aux modes
- Créer une ombre intérieure (inset) pour les entrées et les puits
- Empiler deux couches pour une ombre réaliste et diffuse
- Tune offset et flou pour correspondre à une maquette de design
Foire aux questions
Offset-X/Y déplace l'ombre horizontalement et verticalement, le flou adoucit son bord, et se répand ou rétrécit l'ombre entière avant que le flou ne soit appliqué. L'aperçu en direct montre chaque changement instantanément.
Inset dessine l'ombre à l'intérieur de l'élément au lieu de derrière, donnant un look pressé - utile pour les entrées et les bascules.
Choisissez une couleur, puis utilisez le curseur d'opacité; l'outil affiche une valeur rgba() afin que l'ombre se mélange naturellement.
Oui. Ouvrez des options avancées pour activer une deuxième couche d'ombre avec son propre décalage, flou, couleur et inset.
Non. Le générateur fonctionne entièrement dans votre navigateur; les curseurs calculent simplement une chaîne CSS localement.
Complètement libre, aucun compte et aucune limite — un outil côté client sans rien à mesurer.
Oui. Il fonctionne dans votre navigateur, donc CSS Box Shadow Generator fonctionne sur les téléphones et les tablettes ainsi que sur le bureau — il n'y a pas d'application à installer.
Habituellement, quelques secondes seulement pour un fichier typique — CSS Box Shadow Generator commence à travailler le moment où vous lui donnez votre entrée.
L'usage occasionnel est illimité, sous un généreux bouchon à usage équitable qui le maintient rapide pour tout le monde.
Tous les navigateurs modernes — Chrome, Safari, Firefox et Edge. CSS Box Shadow Generator n'a besoin de rien installé au-delà du navigateur que vous utilisez déjà.