border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Quel est le générateur de neumorphisme CSS ?
Le générateur de neumorphisme CSS construit des éléments d'interface utilisateur douce - le style dans lequel une forme semble doucement extrudée ou pressée dans l'arrière-plan à l'aide d'ombres claires et sombres appariées. Vous définissez la couleur de la surface, la distance d'ombre, le flou, l'intensité du contraste, le rayon et la forme du coin, regardez un aperçu en direct et copiez le CSS exact.
Le néumorphisme fonctionne en plaçant deux ombres de boîte sur un élément qui partage son arrière-plan avec la page : une ombre plus claire en haut à gauche et une plus sombre en bas à droite. Obtenir les deux couleurs d'ombre et les décalages pour paraître convaincant est capricieux à la main. Cet outil dérive automatiquement les nuances claires et foncées de la couleur de votre surface, de sorte que l'effet semble toujours équilibré.
Tout fonctionne dans votre navigateur. Choisissez un préréglage, ajustez les curseurs, basculez entre les formes plates, concaves, convexes et enfoncées, et copiez le CSS. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.
Le neumorphisme vaut la peine d'être utilisé avec des yeux clairs sur sa principale faiblesse, qui est l'accessibilité. Le style fonctionne en plaçant une ombre claire et une ombre sombre sur une surface presque de la même couleur que son arrière-plan, donc le bord d'un contrôle est défini par une différence de quelques pour cent de luminance. Cela se lit comme élégant pour certains spectateurs et comme invisible pour toute personne ayant une sensibilité de contraste réduite, sur un écran sombre ou à l'extérieur. Il échoue WCAG 1.4.11, qui demande un rapport de 3 :1 sur la limite d'un composant interactif Le compromis habituel est de conserver le style pour les surfaces décoratives et de donner aux éléments véritablement interactifs une véritable bordure ou un état de mise au point clair. Les couleurs d'ombre sont dérivées de la surface ici une couleur grise plutôt une paire.
Comment utiliser le générateur de neumorphisme CSS ?
Définir la couleur de la surface
Choisissez la couleur de votre élément, qui doit correspondre à l'arrière-plan de la page derrière lui - le neumorphisme repose sur le partage de l'élément et de la page avec la même couleur de base.
accorder les ombres
Ajustez la distance, le flou et l'intensité pour contrôler la distance qui s'éloigne de la page et la force du contraste lumière/obscur.
Choisissez une forme
Basculez entre plat, concave, convexe et enfoncé. Pressed utilise des ombres encastrées pour paraître enfoncées, tandis que concave et convexe ajoutent un dégradé subtil.
Copiez le CSS
Copiez le bloc généré - rayon de bordure, arrière-plan et ombre de boîte appariée - et collez-le sur votre carte, bouton ou panneau.
Principales caractéristiques
Couleurs d'ombre automatiques
Les nuances d'ombre claire et foncée sont dérivées de la couleur de votre surface, de sorte que l'effet soft-ui semble toujours équilibré sans ajustement manuel.
Quatre formes
Couverture plate, concave, convexe et pressée, aspect relevé et enfoncé, avec embouts emboîtés et occultants et concaves/convexes, ajoutant un dégradé subtil
contrôle total
Les curseurs pour la distance d'ombre, le flou, l'intensité de contraste et le rayon d'angle vous permettent de composer l'effet de à peine là-bas à dramatique.
Aperçu en direct
L'aperçu se trouve sur un arrière-plan correspondant afin que les ombres douces se lisent correctement, se mettant à jour instantanément au fur et à mesure que vous modifiez
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Credit Card Validator
Check a credit card number against the Luhn checksum and detect its card network. Validates the format only, never contacts a bank.
Comments
0 comments
No comments yet. Be the first to share your thoughts!