Elysia Tools
Navigation mobile
Design
Génère des propriétés d'ombre de boîte CSS
Exécution
Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.
Exemples
Associé
Prêt à exécuter
Guide d'utilisation de l'outil
Créez facilement des effets d'ombre portée personnalisés pour vos éléments web grâce à notre générateur CSS intuitif, permettant d'ajuster précisément le rendu visuel de vos interfaces.
Contexte
Besoin d'un style épuré pour des cartes de contenu.
Problème
L'ombre par défaut est trop marquée et manque de subtilité.
Utilisation
Régler le flou à 20px, l'opacité à 0.1 et un décalage vertical léger.
horizontal: 0, vertical: 4, blur: 20, spread: 0, opacity: 0.1Résultat
Une ombre légère et diffuse qui donne un aspect élégant et moderne aux cartes.
Contexte
Création d'un état actif pour un bouton de formulaire.
Problème
Le bouton doit paraître enfoncé dans la page lors du clic.
Utilisation
Activer l'option 'inset' et ajuster les décalages pour simuler une pression.
horizontal: 0, vertical: 2, blur: 5, spread: 0, opacity: 0.3, inset: trueRésultat
Le rayon de propagation permet d'agrandir ou de réduire la taille de l'ombre par rapport à l'élément d'origine.
Oui, il suffit de cocher l'option 'Ombre Intérieure' pour appliquer l'effet à l'intérieur de la boîte.
Oui, le code utilise la propriété standard 'box-shadow' supportée par tous les navigateurs modernes.
Utilisez le curseur 'Opacité' pour modifier la valeur alpha de la couleur choisie.
Oui, les décalages horizontal et vertical acceptent des valeurs négatives pour déplacer l'ombre vers la gauche ou le haut.
Calculateurs, outils numériques, logique de dates, statistiques et finance
Un effet visuel d'enfoncement immédiat renforçant l'interactivité du bouton.