Ajustez les ombres de boîte et le flou d'arrière-plan avec copie rapide du CSS.
Ajustez les ombres de boîte et le flou d'arrière-plan avec copie rapide du CSS. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Cet outil permet de concevoir des ombres CSS et des effets de verre dépoli à l’aide de curseurs, de les prévisualiser en direct sur une carte et de copier un CSS prêt à coller dans votre projet. Dans l’onglet Box Shadow, chaque calque possède un décalage horizontal et vertical (de -50 à 50 px), un rayon de flou (de 0 à 100 px), un rayon d’étalement (de -30 à 50 px), une couleur avec opacité et une case Inset pour les ombres intérieures. La sortie par défaut est box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); avec des couleurs au format rgba.
Le bouton d’ajout de calque permet d’empiler plusieurs ombres ; elles sont séparées par des virgules et le premier calque de la liste est dessiné au-dessus. Une ombre réaliste combine souvent une couche proche et nette avec une couche lointaine et douce. Le modèle 3D Double associe par exemple 0 5px 5px et 0 20px 25px en noir peu opaque, plus naturel qu’une seule grande ombre. Un étalement négatif rend l’ombre plus petite que l’élément, une astuce courante pour les ombres douces sous les cartes, tandis que le modèle Glow Light utilise une couleur de marque, un décalage nul et un grand flou pour créer un halo.
L’onglet Glassmorphism crée des cartes en verre dépoli : réglez le flou d’arrière-plan (backdrop-filter: blur, de 0 à 40 px), la couleur de fond et son opacité, ainsi que la couleur et l’opacité d’une bordure de 1 px. Le CSS généré contient backdrop-filter et le préfixe -webkit-backdrop-filter nécessaire à Safari. La clé de l’effet est un fond semi-transparent avec quelque chose derrière ; sur une couleur unie, il n’y a rien à flouter, c’est pourquoi l’aperçu permet de basculer entre des fonds dégradés et sombres.
Quelques conseils pratiques : de grandes surfaces avec backdrop-filter peuvent ralentir les smartphones modestes, réservez-le à quelques cartes ou à la barre de navigation. Surveillez le contraste du texte sur les fonds translucides ; si l’opacité est faible, foncez la teinte ou utilisez une graisse plus forte. Les valeurs rgba s’utilisent telles quelles avec des variables CSS ou les valeurs arbitraires de Tailwind. Tout fonctionne dans votre navigateur, sans inscription.
box-shadow accepte une liste séparée par des virgules : la première ombre est dessinée au-dessus et chacune des suivantes en dessous. Placer d’abord une ombre petite et nette, puis une plus grande et plus pâle, donne une profondeur convaincante. Dans l’outil, Layer #1 est le calque supérieur.
Avec Inset coché, l’ombre est dessinée à l’intérieur de l’élément. C’est utile pour des champs de saisie en creux, des boutons à l’état enfoncé ou un léger reflet sur le bord supérieur d’une carte en verre ; le modèle Glass Inner utilise justement une ombre intérieure blanche et discrète.
backdrop-filter floute ce qui se trouve derrière l’élément : la couleur de fond doit donc être semi-transparente (opacité inférieure à 1) et il faut une image, un dégradé ou un autre contenu derrière. Sur un fond uni, l’effet est à peine visible. Conservez aussi -webkit-backdrop-filter pour Safari.
Les versions actuelles de Chrome, Edge, Firefox et Safari le prennent en charge ; Safari a besoin du préfixe -webkit-, déjà inclus dans le CSS généré. Si vous devez supporter de très anciens navigateurs, prévoyez une couleur de fond plus opaque en solution de repli.
Voir cette catégorie: Design & Couleurs
Vérifiez la conformité de contraste WCAG 2.1 entre texte et arrière-plan.
Simulez des corps rigides, la gravité et des collisions avec un moteur physique 2D interactif.
Placez des points d'ancrage, faites glisser les poignées de Bézier sur un canevas 500×500 et obtenez aussitôt l'attribut d du tracé SVG et une règle CSS clip-path: path().
Transformez vos captures d'écran en maquettes de navigateur professionnelles.
