Presets
Distance12px
Blur24px
Intensity15%
Radius24px
Generated CSS
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Category:css
Mode:Offline
Version:1.0.0
Access:Free
什么是CSS变态生成器？
CSS Neumorphism Generator 构建了软 UI 元素 - 形状看起来使用成对的明暗阴影从背景轻轻挤出或压入背景的样式,您设置了表面颜色、阴影距离、模糊、对比强度、角半径和形状,观看实时预览,并复制精确的 CSS。
变形是通过在与页面共享背景的元素上放置两个盒子阴影来工作的：左上角有一个较浅的阴影，右下角有一个较暗的阴影。 让两种阴影颜色和偏移看起来令人信服地柔软是很挑剔的。 此工具会自动从表面颜色中获取明暗色调，因此效果看起来始终保持平衡。
一切都在您的浏览器中运行。 选择一个预设，调整滑块，在平坦、凹形、凸形和按压的形状之间切换，然后复制CSS。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。
Neumorphism值得用清晰的眼光来了解它的主要弱点,那就是可访问性。这种风格的工作原理是在与背景颜色几乎相同的表面上放置一个光影和一个暗影,因此控件的边缘由亮度相差几%来定义。这对一些观众来说是优雅的,对于任何对比度降低的人来说都是不可见的,在昏暗的屏幕上,或者在户外。它失败了WCAG 1.4。11,它要求在交互组件的边界上采用3:1的比例。通常的妥协是保留装饰表面的风格,并给真正的交互元素一个真实的边框或清晰的焦点状态。阴影颜色源自此处的表面颜色,因此深色表面会产生正确倒置的一对而不是灰色的一对。
如何使用CSS变态生成器？
1
设置表面颜色
选择元素的颜色,它应该与其后面的页面背景相匹配 - 新形态依赖于元素和页面共享相同的基本颜色。
2
调整阴影
调整距离、模糊和强度以控制元素从页面上提起的距离以及光/暗对比的强度。
3
选择一个形状
在平坦、凹、凸、按压之间切换。 Pressed 使用嵌入阴影看起来凹陷，而凹凸增加了微妙的渐变。
4
复制CSS
复制生成的块(边框半径、背景和配对的框阴影)并将其粘贴到您的卡片、按钮或面板上。
主要特点
自动阴影颜色
浅色和暗阴影源自您的表面颜色，因此柔和的UI效果在无需手动调整的情况下始终看起来平衡
四种形状
平、凹、凸、压盖凸起和凹陷的外观，使用嵌入阴影和凹凸加压的凹凸
全控
阴影距离、模糊、对比度强度和角半径的滑块可让您从几乎没有到戏剧性的方式调整效果
实时预览
预览位于匹配的背景上，以便软阴影正确读取，在编辑时立即更新
Frequently Asked Questions
Neumorphism,或称软UI,是一种风格,元素使用两个微妙的阴影从背景中柔和地挤出 - 一个浅色阴影和一个暗色阴影在相对的角落,元素与页面共享其背景颜色,这就造成了表面凸起或压制的错觉。
Related Tools
CGG
css
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.
CTS
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.
ABP
pdf
Add Blank Page to PDF
Insert a blank page at any position in your PDF document. Choose page size (A4, Letter, or match existing pages).
UAP
web
User Agent Parser
Paste a User-Agent string and read the browser, rendering engine, operating system, device type and CPU it describes, all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
neumorphism generatorsoft ui generatorneumorphic cssneumorphism csssoft ui cssneumorphic designcss soft shadowneumorphism button