Ombre de boîte
Vous galérez avec les ombres CSS ? Ajustez les décalages, le flou et l'étendue visuellement, puis copiez simplement le code. Plus besoin de deviner !
Fonctionnalites principales
- Contrôles intuitifs de décalage horizontal et vertical
- Curseurs de rayon de flou et d'étendue
- Prise en charge des ombres intérieures (inset) et extérieures
- Copie du code CSS complet avec toute la mise en forme nécessaire
Guide
Le box-shadow en CSS est l'une de ces propriétés qui semble simple dans la documentation mais devient compliquée dès que vous essayez de créer quelque chose de spécifique. Quel degré de flou donne un aspect naturel ? Quelle valeur d'étendue donne un effet de bordure serrée par rapport à une lueur douce ? L'ombre doit-elle aller vers l'intérieur ou l'extérieur ? Ajuster des chiffres à l'aveugle dans votre code et actualiser la page encore et encore n'est l'idée de plaisir de personne. Le générateur de box shadow gratuit de WebRecast vous donne des contrôles visuels pour chaque paramètre. Faites glisser les décalages horizontal et vertical pour positionner votre ombre. Ajustez le rayon de flou pour la douceur et l'étendue pour la taille. Choisissez n'importe quelle couleur d'ombre, définissez son opacité et basculez entre les ombres externes et internes (inset). Vous voyez le résultat se mettre à jour en direct au fur et à mesure que vous faites glisser chaque curseur, ce qui facilite l'obtention de l'effet exact que vous souhaitez. Quand vous êtes satisfait du rendu, copiez le code CSS complet - correctement formaté et prêt à coller dans votre feuille de style. L'outil prend également en charge la superposition de plusieurs ombres, c'est ainsi que l'on crée ces effets de profondeur riches et réalistes que l'on voit sur les designs de cartes modernes. Si vous avez utilisé l'outil box shadow de CSSmatic, Box-Shadow.dev ou Neumorphism.io, vous connaissez le concept. Ce générateur met tous les contrôles dans une interface propre. Un conseil pratique : pour les éléments de type carte, utilisez une ombre subtile avec environ 10-20px de flou, peu d'étendue et un noir ou gris semi-transparent. Cela soulève la carte de la page sans paraître dramatique. Pour les boutons, une ombre plus petite avec 4-8px de flou crée une sensation agréable de cliquabilité. Cet outil de box shadow en ligne gratuit fonctionne dans votre navigateur sans rien à installer. Concevez votre ombre, copiez le CSS, collez-le dans votre projet. Visuel, rapide et totalement gratuit.
Questions frequentes
Puis-je superposer plusieurs ombres ?
Oui ! Je vous permet de définir plusieurs couches d'ombre, et je les formaterai en une seule chaîne CSS.
Cela fonctionne-t-il aussi pour text-shadow ?
Cet outil se concentre sur box-shadow. Vous pouvez appliquer des valeurs similaires à text-shadow dans votre CSS.
