Créez facilement votre box shadow avec notre outil gratuit
Créez des ombres uniques pour vos projets, et obtenez instantanément la configuration pour TailwindCSS.Préférez-vous utiliser du HTML ou du CSS directement ? Copiez simplement le code généré pour votre box shadow et intégrez-le à votre design en un clin d'œil. Commencez maintenant à donner vie à vos idées avec style.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
Tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
boxShadow: {
custom: "0px 0px 0px 0px #00000040",
}
}
}
}
// html
<div className="shadow-custom"></div>
Guide d'Utilisation : ShadowsFlow – Créez des Ombres Portées Personnalisées
ShadowsFlow est l'outil incontournable sur Tailflows pour générer des box-shadows personnalisées adaptées à Tailwind CSS, au CSS standard, et aux styles en ligne HTML. Que vous souhaitiez ajouter une profondeur subtile à vos composants ou créer des effets d'ombre complexes, ShadowsFlow vous offre une interface intuitive pour personnaliser entièrement vos ombres portées. Voici comment maîtriser cet outil puissant.
Étape 1 : Commencez avec une Couche de Base
- Visitez ShadowsFlow sur Tailflows :Accédez directement à l'outil pour commencer.
- Analysez la Couche Initiale : une couche initiale est prédéfinie avec des valeurs de base : décalage X à 0, décalage Y à 0, flou à 0, propagation à 0, opacité à 25%, et couleur à #000000. Cette couche sert de point de départ pour votre création.
Étape 2 : Personnalisation des Ombres
- Ajustez les Paramètres : Modifiez les valeurs de décalage X et Y, le rayon de flou, la propagation, l'opacité, et la couleur selon vos besoins. Chaque modification offre un aperçu en temps réel sur une carte d'exemple.
- Inset ou Pas : Choisissez si l'ombre doit être intérieure (inset) ou standard.
- Ajoutez des Couches : Vous avez la possibilité d'ajouter autant de couches d'ombres que nécessaire, chaque couche étant indépendante pour une personnalisation granulaire.
Étape 3 : Visualisation et Ajustements en Temps Réel
- Aperçu Dynamique : Tandis que vous ajustez les paramètres et ajoutez des couches, l'effet est immédiatement visible sur la carte d'exemple, vous permettant d'évaluer l'esthétique et de faire des ajustements précis en temps réel.
Étape 4 : Exportation de votre Configuration
- Sélectionnez le Format de Sortie : Une fois satisfait du résultat, choisissez entre Tailwind CSS, CSS standard, ou HTML pour l'exportation.
- Copiez la Configuration :
- Pour TailwindCSS : Copiez la configuration de la box-shadow pour l'utiliser comme classe utility dans votre code HTML.
- Pour CSS : Copiez le code CSS pour l'appliquer directement à vos classes ou variables CSS.
- Pour HTML : Copiez le style en ligne pour l'appliquer directement sur vos éléments HTML.
Pourquoi Utiliser ShadowsFlow ?
- Intuitivité et Rapidité.
- Flexibilité de Design.
- Prêt pour TailwindCSS , CSS, et HTMl
- Optimisation du Workflow.
ShadowsFlow simplifie la création d'ombres portées en offrant un contrôle total sur chaque aspect de la conception. Que vous ayez besoin d'une ombre subtile ou d'un effet dramatique, ShadowsFlow est l'outil parfait pour injecter de la profondeur et du style dans vos projets web.
plus de 180 exemple de shadows
Ici, nous avons pris la peine de faire la plus longue liste de box shadow avec tailwindcss. Trouvez celui qui vous convient le mieux et copiez le code css, html ou config tailwindcss selon vos choix.