neumorphism | 🎉 Generate CSS for your Neumorphism/Soft UI design | User Interface library

 by   adamgiebl JavaScript Version: Current License: BSD-3-Clause

kandi X-RAY | neumorphism Summary

kandi X-RAY | neumorphism Summary

neumorphism is a JavaScript library typically used in User Interface applications. neumorphism has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

CSS code generator for a new popular design trend called Neumorphism/Soft UI. I hope this will help designers and developers experiment with it and possibly adapt it. Built with React.js.

            kandi-support Support

              neumorphism has a medium active ecosystem.
              It has 4483 star(s) with 269 fork(s). There are 41 watchers for this library.
              It had no major release in the last 6 months.
              There are 6 open issues and 3 have been closed. On average issues are closed in 1 days. There are 15 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of neumorphism is current.

            kandi-Quality Quality

              neumorphism has 0 bugs and 0 code smells.

            kandi-Security Security

              neumorphism has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              neumorphism code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              neumorphism is licensed under the BSD-3-Clause License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              neumorphism releases are not available. You will need to build from source code and install.
              It has 866 lines of code, 0 functions and 13 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed neumorphism and discovered the below as its top functions. This is intended to give you an instant insight into neumorphism implemented functionality, and help decide if they suit your requirements.
            • Registers a new SWF service and returns it .
            • Register a service worker
            • Check if a service worker is valid
            • Convert a hex color to RGB
            • Unregister the service worker
            • Converts a hex color to RGB .
            Get all kandi verified functions for this library.

            neumorphism Key Features

            No Key Features are available at this moment for neumorphism.

            neumorphism Examples and Code Snippets

            No Code Snippets are available at this moment for neumorphism.

            Community Discussions


            Creating inner shadows in UIView to replicate Neumorphic Style
            Asked 2021-Dec-21 at 20:09

            I have the task to implement neumorphic design styles in my UIKit application. I have successfully implemented the double outer shadows (dark and light), but I somehow, can't figure out how to implement the inner shadows inside the view. I've tried approaches like CAGradientLayer that goes from .black to .clear to .white, but it isn't looking the way it is supposed to. I've searched the internet for various solutions, but couldn't seem to find one appropriate one.

            How should I create the inner shadows? What approach should I use? I am fine with a solution in either Swift or Objective-C.

            Current state of the view

            The state that I am trying to reach

            A simplified version of the current state (for the outer shadows):



            Answered 2021-Oct-18 at 14:14

            If I remember well, you have to create an overlay containing the blurred shape, clipped to the shape. With the clipping, the outside part of the blur will disappear, and you will just have the inner blur as a shadow.



            WPF .net - Buttons look different when zoomed
            Asked 2021-Oct-30 at 07:48

            I am developing a WPF .net app in visual studio and having an issue where the buttons and their shaders look different depending on how zoomed in I am. This applies to changing the resolution of the displays as well. I have attached a few screenshots illustrating the issue. Anybody know what's going on here?

            • I am using the WPF-Neumorphism-Plus kit for visual studio

            • My XAML (I've only included the style stuff but can add more if needed)



            Answered 2021-Oct-15 at 11:17

            It appears to me that this is based on a perspective issue (zoomed vs regular). Looking at the two images you provided, the button with 'D' text does not alter its perspective. Maybe this is due to the ambient area between the edge of the text area and edge the button. Have you tried changing the background of the button and text items separately?



            How to display on/off value for the power button in console?
            Asked 2021-Jun-19 at 18:38

            I have written the code for neumorphism power button and it is working perfectly fine but I'm not able to figure out how to display the status in the console using javascript, i.e., if the power button is on or off.

            HTML code:



            Answered 2021-Jun-19 at 14:30

            Add a change event listener to the power button, then check whether it is checked with the checked property:



            Display size is affecting my app layout Android?
            Asked 2021-May-18 at 09:40

            So I have been building a simple login screen and the display size of the device is affecting the layout and it keeps changing on different devices, New to the android studio is there a solution?

            XML code

            its a simple layout with Neumorphism .

            **And I know we can make the layout responsive with constraint but is there any other way other than constraint layout? **



            Answered 2021-May-15 at 14:34

            Try using ConstraintLayout for this purpose. It works well for me. Just change your layout to ConstraintLayout and set all the constraints according to your needs. Hope this works.



            html selector custom arrow
            Asked 2021-Mar-31 at 10:35

            I am want to change my selector arrow icon. So far I disabled the default appearance and added the arrow, from the link, below:

            Obviously I do not find my mistake, further I added an !important tag too, in case a rule overrides the setup. So currently there is no arrow.

            And idea?



            Answered 2021-Mar-31 at 10:35

            Fixed the select css, working example:

            The background image's position and size was not set correctly.

            The changes include:

            • Setting the background-position, background-size, and background-repeat properties of select, and removing arbitrary CSS properties from the same selector.



            Fragment tab not attached to a context
            Asked 2021-Jan-09 at 05:11

            I'm currently making a soundboard app on android studio which has a ton of fragments. The first page on my tab layout is just a normal button view, but my second tabView has another fragmentView within it. The goal is for the first page to just show some normal sounds, and the second tab to have multiple operators to choose specific soundboards for.

            Anyways, the app seems to work fine. I can switch from the main tab to the operator tab, and even select operator soundboard pages and be moved to their fragments. However as soon as I try to switch fragments (through my tabview) my app crashes and I get the error:



            Answered 2021-Jan-09 at 05:00

            Try to remove the ViewTreeObserver.OnScrollChangedListener when the fragment is destroyed this will avoid any listener that can be attached to a destroyed fragment context not to be triggered whenever you leave and come back to this fragment.

            First: make a global field for the listener



            CSS Drop Shadow effect not displaying correctly
            Asked 2020-Dec-17 at 12:06

            I am creating a button with a drop shadow effect (neumorphism) but when I apply my CSS to the button is just appears as a 2 toned solid button...Which part of the CSS am I using incorrectly? Are my drop shadow values wrong relative to the size of the button? Changing the width and height doesn't help.



            Answered 2020-Dec-17 at 12:06

            to remove black border from button just add broder-style:none to button. Added one more button with hover and active styling.

            for creating Neumorphism effect you can check



            Xamarin Forms Android Frame Renderer and Corner Radius
            Asked 2020-Mar-25 at 18:51

            When I create a custom renderer for Xamarin Forms Frame in Android, CornerRadius property goes for a toss. No matter what I set it to, it doesn't work. It always draw a rectangle.

            Xamarin Forms (Control) -



            Answered 2020-Mar-22 at 16:52

            Try this

            Setting corner radius half of height and width and setting padding to 0 .



            Can I apply a Neumorphism effect to a QWidget?
            Asked 2020-Mar-15 at 02:04

            While Qt provides the QGraphicsDropShadowEffect, there's no "Neumorphism" effect available:

            In css there is the box-shadow property (that's how it's done in the image above), which can have multiple colors, but Qt lacks support for that property, and it's not possible to apply more than one graphics effect at once.

            Can this be done?



            Answered 2020-Mar-15 at 02:04

            The solution is to create a custom subclass of QGraphicsEffect and using gradients.

            At first I thought about following the same concept used for CSS, subclassing QGraphicsDropShadowEffect and using another one internally to draw the "other" shadow, but I didn't like the result: in certain situations (usually when radius and contrast are too big) it just doesn't work:

            If you look closely, you'll find out that the result is too similar to the drop shadow, like the object is floating, while it should be "extruding".

            The only effective solution I found was to manually draw everything, using linear gradients for borders and composite gradients for the corners. While the first is pretty logical, the second required a bit of ingenuity by using composite modes of QPainter: Qt only has radials and conical gradients, but there is no "mix" between them.

            The trick then was to create a radial gradient for the "light" color with the full color at the center and the same color at the border with 0 alpha, then superimpose a conical gradient for the "dark" color (with the "dark" color on start and the "light" at 90°), which will be painted using the alpha component of the first gradient.

            Then it's just a matter of creating functions to update each one of the properties: distance (the extent of the effect), color (used for the gradients, defaults to the application's QPalette.Window color role), origin (the corner used as the "source" for the light) and an optional clipRadius for rounded borders.

            Some important notes:

            • since it's a QGraphicsEffect, it can only be applied to a "parent" widget: children cannot have another effect applied on them, which means that if you have a container like QGroupBox or QTabWidget, you have to choose if you want to apply it to the parent or to each of the children;
            • due to its "simple" nature, it only supports rectangular shapes: if a widget has a mask, the effect shape will still be based on a rectangle;
            • layout margins and spacings should be taken into account, as multiple effects could overlap if the widgets that use them are too narrow; I'd suggest using a QProxyStyle and set a minimum default for both PM_Layout[*]Margin and PM_Layout[*]Spacing, and return a value according to the length property;
            • the clipRadius property allows rounded border clipping, but it's not perfect, since QPainter's clipping doesn't support antialiasing; I'll see if I can address this issue in the future;
            • when applied to QGraphicsScene items, similarly to QGraphicsDropShadowEffect, the effect is in device coordinates, so transformations (rotation, scale, shearing) won't be applied; I'll update this answer whenever I'll be able to solve this issue too;

            And here is a comparison between the Qt QGraphicsDropShadowEffect, the css emulation, and my NeumorphismEffect (the last two have rounded borders: the css version uses the border-radius property while mine is set with clipRadius):



            How to make Inner shadow in SwiftUI
            Asked 2020-Mar-04 at 11:54

            I'd like to make View's (Text, Button, etc) Inner shadow in SwiftUI

            There is Outer shadow but there is no Inner shadow in SwiftUI

            What I want to make is Neumorphism UI using SwiftUI

            Image from "Neumorphism in user interfaces" by Michal Malewicz

            I'd like to make button pressed UI

            but I don't know where to start to make inner shadow



            Answered 2020-Mar-04 at 11:54

            This is what I did to create an inner shadow like the one in the picture. I created it in another swiftui file and just called in in my main content view but you can display it however you'd like.

            I created a Button in a ZStack only because I first recreated it with a rounded rectangle but I think this would would in a HStack or VStack as well just haven't tried them. To create the inner shadow I created an overlay and clipped the shadows to the shape.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install neumorphism

            You can download it from GitHub.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone adamgiebl/neumorphism

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link