Générateur de box-shadow CSS
Ajustez le décalage, le flou, l’extension, la couleur et l’opacité à l’aide de curseurs et d’un sélecteur de couleur pour concevoir une box-shadow CSS, visualisez-la en direct sur une boîte d’aperçu, et copiez la déclaration box-shadow générée directement dans votre feuille de style.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);Comment ça marche
Le décalage X et le décalage Y déplacent l’ombre horizontalement et verticalement, le rayon de flou adoucit son bord, et le rayon d’extension l’agrandit ou la réduit avant l’application du flou. Choisissez une couleur et une opacité pour l’ombre, et activez « inset » pour dessiner l’ombre à l’intérieur du bord de la boîte plutôt qu’à l’extérieur.
Astuce
Les ombres discrètes sont généralement les plus réussies : un léger décalage, un rayon de flou environ deux à trois fois supérieur au décalage, et une opacité bien inférieure à 50 % donnent un effet de légèreté naturel plutôt qu’un contour lourd.
Puis-je superposer plusieurs ombres ?
Oui — la propriété CSS box-shadow accepte une liste d’ombres séparées par des virgules, superposées de haut en bas. Cet outil génère une ombre à la fois ; combinez plusieurs déclarations générées (séparées par des virgules) pour créer des ombres superposées et plus réalistes.
Plus d'outils dans cette catégorie
Testeur d’expressions régulières
Testez des expressions régulières sur un texte d’exemple avec surlignage des correspondances en direct.
Analyseur d’expressions cron
Analysez une expression cron à 5 champs en une description en langage clair et consultez ses prochaines exécutions.
Convertisseur d’encodage de texte
Convertissez du texte en hexadécimal UTF-8, binaire, points de code, Base64, encodage URL et entités HTML, tout à la fois.
Générateur de mots de passe
Générez instantanément des mots de passe forts et aléatoires, directement dans votre navigateur.
Formateur et validateur JSON
Formatez, validez et minifiez du JSON instantanément dans votre navigateur.
Générateur d'UUID
Générez des UUID aléatoires version 4 (RFC 4122) directement dans votre navigateur.
Décodeur JWT
Décodez et inspectez des JSON Web Tokens (JWT) directement dans votre navigateur.
Comparateur de texte
Comparez deux blocs de texte et voyez instantanément chaque ligne ajoutée ou supprimée.
Générateur de slug
Transformez n’importe quel texte en slug propre et compatible URL, en temps réel.
Convertisseur de bases numériques
Convertissez instantanément des nombres entre binaire, octal, décimal et hexadécimal.
Convertisseur de timestamp Unix
Convertissez en direct des timestamps Unix en dates, et inversement.
Générateur de hachage
Générez des empreintes SHA-1, SHA-256 et SHA-512 à partir de n'importe quel texte, directement dans votre navigateur.
Générateur d'expression cron
Créez une expression cron valide à 5 champs à l'aide d'un formulaire simple — sans avoir à mémoriser la syntaxe.
Générateur de Lorem Ipsum
Générez du texte de remplissage Lorem Ipsum en paragraphes, phrases ou mots pour vos maquettes et mises en page.
Aperçu Markdown
Écrivez du Markdown à gauche et voyez le HTML rendu se mettre à jour en direct à droite.
Calculateur de sous-réseau IP
Entrez une adresse IPv4 en notation CIDR et obtenez son réseau, son masque, sa diffusion et sa plage d'hôtes.
Recherche de codes de statut HTTP
Recherchez n'importe quel code de statut HTTP et découvrez sa signification standard en clair.
Formateur SQL
Mettez en forme du SQL minifié ou désordonné en instructions lisibles et indentées.
Convertisseur image vers Base64
Convertissez une image en URI de données Base64 à coller directement dans du HTML, du CSS ou du JSON — entièrement dans votre navigateur.
Comparateur Semver
Comparez deux chaînes de version sémantique et découvrez laquelle prévaut, selon les règles officielles du semver.