Paramètres
X : 0, Y : 4, flou : 6, étalement : -1, rgba(0,0,0,0.1)
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Outils de design
Générateur d'ombres de boîte CSS – Commandes visuelles
Ajustez visuellement le décalage, le flou, la répartition, la couleur, l'opacité et l'encart. Prévisualisez en direct et générez du CSS box-shadow pour les cartes, les boutons et les superpositions.
CSSOmbrebox-shadow
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur d'ombres de boîte CSS
水平偏移 (X) 0px
垂直偏移 (Y) 10px
模糊半径 (Blur) 20px
扩散程度 (Spread) -5px
透明度 10%
预览
Cas d’usage
- Ajouter une ombre extérieure à un bouton ou une carte
- Déboguer la superposition et les ombres des contours nets
- Activer l'encart pour les styles de contrôle encastrés
Mode d’emploi
- Utiliser les curseurs pour le décalage X/Y, le flou et l'étalement
- Définir la couleur et l'opacité de l'ombre ; activez l'encart si nécessaire
- Aperçu, puis copiez le CSS généré
Exemples d’entrée et de sortie
FAQ
Prend-il en charge les ombres incrustées ?
Oui. Activez Inset pour générer une ombre de boîte avec le mot-clé inset et mettez à jour l'aperçu en direct.
Puis-je créer des ombres en couches ?
L'interface utilisateur génère un calque à la fois. Pour plusieurs calques, ajustez plusieurs fois et joignez les valeurs d'ombre de la boîte avec des virgules.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur de dégradé CSS
Générateur de dégradé CSS – Linéaire, Radial, Conique
Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajustez l'angle et les positions des arrêts, ajoutez plusieurs arrêts et copiez le CSS pour les arrière-plans, les boutons et les transitions de marque.
CSS Dégradé Arrière-plan
Convertisseur de couleurs
Convertisseur de couleurs – HEX, RVB, HSL en ligne
Convertissez les couleurs parmi les variables HEX, RVB, HSL, HWB, CMJN et CSS dans votre navigateur. Comprend un sélecteur de couleurs et un assistant de couleurs aléatoires pour le transfert de conception, le travail sur les feuilles de style et l'alignement des couleurs de la marque.
Couleur HEX RVB
Générateur de glassmorphisme
Générateur de glassmorphisme — CSS backdrop-filter
Ajustez visuellement le flou, l'opacité, la couleur d'arrière-plan et l'opacité des bordures pour générer du CSS en verre dépoli avec un préfixe -webkit. Utile pour les cartes, les barres de navigation et les calques modaux.
CSS Glassmorphism backdrop-filter