Générateur d'ombre de boîte CSS
Construisez une élévation réaliste au lieu de deviner des valeurs. Ajustez le décalage horizontal et vertical, le flou, la répartition, la couleur et l'opacité, empilez plusieurs calques pour la profondeur, puis copiez la règle CSS exacte.
Faits clés
- Catégorie
- Conception et couleur
- Prix
- Gratuit
- Compte
- Non requis
- Traitement
- Dans votre navigateur
- Saisir
- Fichiers locaux ou données collées
- Plate-forme
- Navigateurs de bureau et mobiles modernes
Ce que ça fait
Construisez une élévation réaliste au lieu de deviner des valeurs. Ajustez le décalage horizontal et vertical, le flou, la répartition, la couleur et l'opacité, empilez plusieurs calques pour la profondeur, puis copiez la règle CSS exacte.
Concevez visuellement des ombres de boîte en couches et copiez du CSS prêt pour la production.
Comment l'utiliser
Voici la version courte de l'utilisation de Générateur d'ombre de boîte CSS.
- Définir les décalages et le flou — Faites glisser les curseurs ou saisissez les valeurs exactes des pixels ; la carte d'aperçu est mise à jour immédiatement.
- Choisissez la couleur et l'opacité — Utilisez le sélecteur de couleurs et le curseur alpha pour correspondre à votre palette, y compris les ombres en mode sombre.
- Copiez le CSS — Ajoutez plus de calques si vous avez besoin d'une ombre plus douce et plus naturelle, puis copiez la déclaration box-shadow.
Des fonctionnalités qui comptent
Ce que Générateur d'ombre de boîte CSS fait bien.
- Rien ne quitte votre appareil — Le travail se déroule dans l'onglet de votre navigateur. Il n'y a pas de point final de téléchargement dans cette application, donc vos fichiers et votre texte ne peuvent pas être stockés, enregistrés ou vus par nous.
- Pas d'attente de téléchargement — Vous évitez complètement l’aller-retour vers un serveur. Les résultats sont limités par votre propre processeur, et non par la vitesse du réseau ou la taille de la file d'attente.
- Gratuit, pas de compte, pas de quotas — Pas de mur d'inscription, pas de filigrane, pas de limite quotidienne. Les comptes facultatifs existent uniquement pour enregistrer les favoris et les préréglages sur tous les appareils.
Questions fréquemment posées
Mon design peut-il être utilisé en toute sécurité ici ?
Oui. Cet outil s'exécute entièrement dans votre navigateur en utilisant JavaScript. Rien de ce que vous collez ou ouvrez n’est envoyé à un serveur et la page n’en conserve aucune copie après sa fermeture.
Dois-je créer un compte ?
Non. Chaque outil est entièrement utilisable sans connexion. Un compte ajoute uniquement des favoris enregistrés et des préréglages réutilisables.
Est-ce que ça marche sur un téléphone ?
Oui. L'interface est avant tout mobile avec de grandes cibles tactiles et une disposition empilée, elle fonctionne donc sur les téléphones et les tablettes ainsi que sur les ordinateurs de bureau.
Comment créer une ombre à l'aspect naturel ?
Utilisez un petit écart négatif, un flou important et une faible opacité, décalés vers le bas plutôt que latéralement. L’empilement de deux ou trois calques à faible opacité est généralement plus esthétique qu’une seule ombre épaisse.
Pourquoi mon ombre semble-t-elle tronquée ?
L'élément parent a probablement un débordement masqué ou l'ombre est plus large que le remplissage environnant. Ajoutez une marge ou un remplissage autour de l'élément pour que le flou ait de la place pour le rendu.
Ouvrir Générateur d'ombre de boîte CSS
Essayez-le maintenant : il s'exécute dans votre navigateur et ne nécessite aucun compte.
Ouvrez l'outil