Générateur d'Ombres CSS
Créez de belles ombres CSS avec aperçu en direct et plusieurs couches
Créez de belles ombres CSS avec aperçu en direct et plusieurs couches
- Préparer la saisie
Choisissez les options adaptées avec les commandes ci-dessous.
- Exécuter la tâche
Réglez les commandes ci-dessous et examinez l’aperçu.
- Utiliser le résultat
Vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.
Ombres en pixels exportées en CSS, SCSS, classe Tailwind ou JavaScript. Les variables doivent être définies sur la page cible. Syntaxe Tailwind de valeurs arbitraires ; vérifiez dans le projet cible.
Code Généré
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Contrôles d'Ombre
px
px
px
px
Paramètres d'Aperçu
200px
Aperçu en Direct
Preview
Préréglages d'Ombre
Ombres Subtiles
Ombres Moyennes
Ombres Fortes
Material Design
Neumorphique
Générateur d'Ombres CSS
Ombres en pixels exportées en CSS, SCSS, classe Tailwind ou JavaScript. Les variables doivent être définies sur la page cible. Syntaxe Tailwind de valeurs arbitraires ; vérifiez dans le projet cible.
Fonctionnalités
- Ombres en pixels exportées en CSS, SCSS, classe Tailwind ou JavaScript. Les variables doivent être définies sur la page cible. Syntaxe Tailwind de valeurs arbitraires ; vérifiez dans le projet cible.
- Couches d'Ombre
- Aperçu en Direct
- Préréglages d'Ombre
Comment utiliser
- Ajustez les propriétés d'ombre avec des curseurs
- Choisissez la couleur avec le sélecteur
- Basculez entre ombres externes et internes
- Ajoutez plusieurs couches d'ombre
- Sélectionnez parmi les préréglages
- Prévisualisez l'ombre en temps réel
- Personnalisez la taille d'aperçu
- Copiez le code dans votre format préféré
- Gérez plusieurs couches
- Utilisez les contrôles de couche