Back to Plugins
Neumorphism

Neumorphism

<p>Create beautiful neumorphistic designs in just a few seconds. Just select anything you would like to "neumorph", open the plugin and boom. It adds shadows and gradient fills to your selection, which you can customize to your needs.</p><p><br></p><p>Some <strong>cool live-examples</strong> of neumorphism on the web:</p><ul><li><a href="https://www.productdesignresources.com/" rel="noreferrer noopener nofollow" target="_blank">productdesignresources.com</a></li><li><a href="https://icons.theforgesmith.com/" rel="noreferrer noopener nofollow" target="_blank">icons.theforgesmith.com</a></li><li><a href="https://shape.so" rel="noreferrer noopener nofollow" target="_blank">shape.so</a></li></ul><p><br></p><h2><strong>What is neumorphism?</strong></h2><p>It's a UI trend which is using multiple shadows and gradients to "fake" light and to bring back a more natural and realistic look and feel. Kind of like skeuomorphism in iOS back in 2007. Read more about it here: <a href="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6" rel="noreferrer noopener nofollow" target="_blank">https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6</a></p><p><br></p><h2>A few tips how to create beautiful neumorphic designs:</h2><ul><li>The background layer and the layer you are "neumorphing" should have the<strong> same color</strong>.</li><li>If you neumorph' text, be sure to also have it the same color, open the plugin, and when you're done, you can change the text color to a darker one, for better readability.</li><li><strong>Neumorphism doesn't work on pure white or pure black</strong>, because it adds shadows that are darker / brighter than the background/current selection fill. If you use pure white or black, it will miss one of the shadows and it won't feel "neumorphistic" anymore. I'll suggest to take a kind of bluish tint of white / black.</li></ul><p><br></p><p>—</p><p><br></p><p>Thank you very much for the kind help for the color calculation-algorithm from Adam, he built the site <a href="https://neumorphism.io/" rel="noreferrer noopener nofollow" target="_blank">https://neumorphism.io/</a> on which you can generate neumorphic CSS shadows. Check it out! 🤗</p><p><br></p><h2>Feature requests? 😊 Questions?</h2><p>Just hit me on Twitter (@madebyfabian), via mail (<a href="mailto:[email protected]" rel="noreferrer noopener nofollow" target="_blank">[email protected]</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href="http://buymeacoff.ee/madebyfabian" rel="noreferrer noopener nofollow" target="_blank">http://buymeacoff.ee/madebyfabian</a></p>

toolnewskeumorphismdesignneumorphicmodernskeuomorphismbeautifulneumorphismhelperskeumorphicgradientsshadow

Plugin Preview

Neumorphism preview

About this plugin

Create beautiful neumorphistic designs in just a few seconds. Just select anything you would like to "neumorph", open the plugin and boom. It adds shadows and gradient fills to your selection, which you can customize to your needs.


Some cool live-examples of neumorphism on the web:


What is neumorphism?

It's a UI trend which is using multiple shadows and gradients to "fake" light and to bring back a more natural and realistic look and feel. Kind of like skeuomorphism in iOS back in 2007. Read more about it here: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6


A few tips how to create beautiful neumorphic designs:

  • The background layer and the layer you are "neumorphing" should have the same color.
  • If you neumorph' text, be sure to also have it the same color, open the plugin, and when you're done, you can change the text color to a darker one, for better readability.
  • Neumorphism doesn't work on pure white or pure black, because it adds shadows that are darker / brighter than the background/current selection fill. If you use pure white or black, it will miss one of the shadows and it won't feel "neumorphistic" anymore. I'll suggest to take a kind of bluish tint of white / black.



Thank you very much for the kind help for the color calculation-algorithm from Adam, he built the site https://neumorphism.io/ on which you can generate neumorphic CSS shadows. Check it out! 🤗


Feature requests? 😊 Questions?

Just hit me on Twitter (@madebyfabian), via mail ([email protected]) or via an Issue on GitHub.



Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! http://buymeacoff.ee/madebyfabian

Plugin Details

Version5
CreatedFebruary 16, 2020
Last UpdatedOctober 10, 2020
Categoryediting & effects plugins
CreatorFabian B.
Stats58877 installs, 2063 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:main.js