border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Le générateur de neumorphisme CSS crée des éléments de soft-UI - le style où une forme semble doucement extrudée ou pressée en arrière-plan à l'aide d'ombres jumelées et d'ombres sombres. Vous définissez la couleur de la surface, la distance d'ombre, le flou, l'intensité de contraste, le rayon d'angle et la forme, 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.
Choisissez la couleur de votre élément, qui doit correspondre à l'arrière-plan de la page derrière - Neumorphism repose sur l'élément et la page partageant la même couleur de base.
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.
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 bloc généré (border-rayon, arrière-plan et l'ombre de la boîte appariée) et collez-le sur votre carte, bouton ou panneau.
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.
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
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.
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
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!