Arrière-plan
#e0e0e0
Sortie
box-shadow: 9px 9px ...
Outils de design
Neumorphisme CSS — Générateur d'ombres de l'interface utilisateur logicielle
Générer du CSS d'ombre incrusté/départ neumorphique à partir de la couleur d'arrière-plan, de la distance et flou. Prévisualisez les looks surélevés et enfoncés pour les boutons, les cartes et les commandes lumineuses de l'interface utilisateur logicielle.
CSSNeumorphismeOmbre
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.
设计配色
Neumorphisme CSS
Générer du CSS d'ombre incrusté/départ neumorphique à partir de la couleur d'arrière-plan, de la distance et flou. Prévisualisez les looks surélevés et enfoncés pour les boutons, les cartes et les commandes lumineuses de l'interface utilisateur logicielle.
生成 CSS 代码
调整颜色、距离、模糊、圆角或形态后，预览和复制 CSS 会保持一致。
Cas d’usage
- Ajuster les ombres des boutons contextuels
- Ajouter la profondeur de la carte de lumière
- Comparer les commandes surélevées et enfoncées
Mode d’emploi
- Choisir une couleur d'arrière-plan
- Ajuster la distance et le flou
- Prévisualisez et copiez le CSS
Exemples d’entrée et de sortie
FAQ
Est-ce que cela fonctionne bien dans l'obscurité arrière-plans ?
Cela fonctionne mieux sur des arrière-plans clairs. Les interfaces utilisateur sombres nécessitent généralement des couleurs de surbrillance et d'ombre distinctes.
En quoi diffère-t-il du générateur d'ombre de boîte ?
Cet outil génère la combinaison de double ombre typique du neumorphisme. L'outil général est meilleur pour les décalages arbitraires, les étendues et les ombres superposées.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur d'ombres de boîte CSS
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.
CSS Ombre box-shadow
Glassmorphisme CSS
Glassmorphisme CSS — Générateur de cartes en verre dépoli
Ajustez la couleur, l'opacité, le flou et le contour pour prévisualiser et générer du CSS de carte en verre dépoli avec backdrop-filter. Utile pour les panneaux translucides et les couches de navigation ; tout s'exécute dans le navigateur.
CSS Glassmorphism backdrop-filter