Neumorphism & Dual Shadows

Hey there. I need some help. I’m looking to create a site around Neumorphic design, which requires dual shadows on objects as seen in example here attached. Anyway to do this simply in Blocs? I’ve already tried doing two shadows with different classes on the same element, however one shadow just overtakes the other rather than both co-existing at once on alternative sides.

Hey @soltechie,

You might find this useful…

1 Like

Thank you so much! This is absolutely awesome. Thank you a million!!

Sorry, now I’m being a noob, but how would I actually physically implement generated buttons as a button on a blocs site?

Create your own custom class, place the class in the header of the page and add the styles from that generator. Then add the class to any buttons of other assets you want.

I’m away from my Mac for the night, if someone else doesn’t post, I’ll add clearer instructions later on.

I think I’m getting it? However there’s two sets of information related to box-shadow and I still don’t see how you can manually input that. Sorry, I clearly don’t know much about web design yet!

Hey @soltechie,

Here you go, an example of how to do it. A couple of things to look at…

  1. The page header has the following code
<style>
.myfancybutton {
border-radius: 70px;
background: linear-gradient(145deg, #dea77a, #ffc792);
box-shadow: 5px 5px 15px #634a36, 
			-5px -5px 15px #ffffda;	
}
</style>
  1. The button has the class myfancybutton added to it using the side bar.

  2. Run preview of display in a browser and you will see the styles applied.

Neumorphic_Example.bloc (1.4 MB)

1 Like

I should add the reason we are adding the CSS that way, is the class manager at present does not support all the style attributes you need to use.

1 Like

Is it possible to add any element inside the area?

@KBConcepts

You can apply these classes to anything, youre not limited to a button.

It will very soon :stuck_out_tongue_winking_eye:

3 Likes

!!! @Norm :heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes:

Need Beta tester??