Neumorphic Generator

Delightful CSS presets for your next product

6 followers

Delightful CSS presets for your next product

6 followers

Neumorphic shapes look incredible but are difficult to create. This generator makes it easy to create the shapes you’ve envisioned and comes with 50+ presets for inspiration.

Launch tags:Design Tools•User Experience•Developer Tools

Launch Team

Framer AI AgentsDesign and publish professional sites with AI

Promoted

Looks like you put a lot of work into this but why is this design trend getting popular? Flavor of the month for wannabe Jony Ives

Report

6yr ago

at.market

Maker

@rainsmits Neumorphism is not for every product, but under the right circumstances it can work much better than standard UI design

Report

6yr ago

@rainsmits @bobbyzhang Curious to learn more, what are those circumstances?

Report

6yr ago

at.market

Maker

@rainsmits @carolina_li When you have a simple UI without much text and you want to intrigue your users. Worked well for my last product, serverless.cam

Report

6yr ago

WakeMeHere

Nice shapes, but what can I do with it after I created it? Download the image, export the CSS? Didn't find any of this …

Report

6yr ago

at.market

Maker

@kie There's a section for you to export the CSS on the second page

Report

6yr ago

at.market

Maker

Hey there, I first became interested in Neumorphism when I learned what it actually was: two shadows, one lighter and one darker, arranged diagonally. That's all it is. You can give your users a novel and delightful experience for the low low price of two box shadows. The funny thing is that it's still underused in website design. When I was building my last product, serverless.cam, I opted to go fully Neumorphic. Well, nothing out there filled my needs for a quick but good Neumorphic design and tweaking the shadows ended up taking way too long. Thats why I built my own little neumorphic generator with presets and the ability to adjust concavity. Please take a look and let me know what you think! Bobby

Report

6yr ago

Can there be any alternative way to download the generated shape?

Report

6yr ago

Anyway of converting these to HTML?

Report

6yr ago

at.market

Maker

@josh_duckworth So basically, you create a div and set the CSS class of that div to whatever class, and in that CSS class you paste the CSS you copied from the generator

Report

6yr ago