Puissants générateurs CSS pour les ombres de boîte, les mises en page flexbox, les mises en page en grille et les conversions d'unités. Obtenez instantanément du code CSS et Tailwind. Tout le traitement se fait localement dans votre navigateur.
box-shadow: 4px 4px 8px 0px #00000040;Notes d'outils est une fonctionnalité Supporter.
Choisissez entre les onglets Box Shadow, Flexbox ou Unit Converter.
Utilisez les curseurs et les champs pour configurer les propriétés CSS. Visualisez un aperçu en direct du résultat.
Copiez le code CSS ou Tailwind généré dans votre presse-papiers.
Essayez des configurations prédéfinies pour les modèles courants, puis personnalisez-les.
Le générateur de box shadow crée des propriétés CSS box-shadow avec décalage horizontal/vertical, rayon de flou, étalement et couleur personnalisables. Plusieurs couches peuvent être empilées pour des effets complexes comme des cartes surélevées ou des designs néomorphiques. Chaque couche prend en charge les couleurs RGBA avec transparence alpha et les ombres inset pour les effets intérieurs. L'outil génère à la fois du CSS standard et des valeurs arbitraires Tailwind.
Configurez les propriétés du conteneur flex (flex-direction, justify-content, align-items, flex-wrap, gap) et visualisez les classes CSS et Tailwind équivalentes en temps réel. Le constructeur visuel montre comment les éléments seront disposés avec vos paramètres. Compatible avec toutes les propriétés flexbox modernes incluant la direction ligne/colonne, l'alignement center/space-between et l'espacement gap.
Convertissez entre les unités absolues (px, pt) et les unités relatives (rem, em, vw, vh). Utilise votre taille de police de base spécifiée (par défaut 16px) pour des calculs précis de rem/em. La conversion suit les standards W3C : 1rem = taille de police de base, 1em = taille de police parente, 1vw = 1% de la largeur du viewport. Utile pour le design responsif et le dimensionnement accessible.
Toute la génération CSS se passe entièrement dans votre navigateur grâce à JavaScript. Vous obtenez à la fois du CSS vanilla et une sortie Tailwind CSS là où c'est applicable. Le code généré est prêt pour la production et peut être copié directement dans vos feuilles de style. Aucune communication avec le serveur n'a lieu — l'outil fonctionne complètement hors ligne une fois chargé.
Cet outil génère des box shadows (couche unique ou multiple), des layouts flexbox (propriétés de conteneur et d'élément) et convertit entre les unités CSS (px, rem, em, %).