Gradient Drop Shadow

Community resources Product feedback
1

If there’s a way to do this… I’d appreciate someone telling me.

If not… Webflow… I’d like the ability to create a Gradient Drop Shadow.

One where the intensity can be set at a start point - and decrease at the end point… or vice versa.

Basically - the same exact thing as a Gradient… except for shadow.

I have a need for a left and right shadow… basically creating “a standout”.

When I create left (or right shadow)… I get a shadow (of same intensity) from top to bottom.

I figured… if I change angle to (for example 4 degrees for a Right Shadow)… I can eliminate the bottom shadow

or… 356 degrees for a Left Shadow

But this doesn’t the a shadow “disappearing over distance”… which is what a Gradient allows you to do.

2

What you’re describing looks like depth with extrusion. That must be possible through JS. Or if you’re patient, you add 1px drop shadow 50 times and decrease the opacity at each step.

3

Ahhh… ic… an After Effects Jedi as well. You are.

Yes… in way. It is similar to depth with extrusion

  • but obviously on a much simpler basis.

This image might help a little more. Basically need a larger shadow on top - little to no shadow on bottom.

In the past - I’ve done with this images - but since the content size is dynamic - I cannot use a pre-determined image.

457×811 201 KB

ok. Since I’m into self torture… I will consider the diminishing pixel opacity route.

Luckily for me - the height of the element is about 600px.
So this will take awhile… and quite a bit of patients as well.

4

Your image makes me realize I don’t really understand what you’re trying to achieve… can you make a pixel mockup in PS?

There must be tons of solution, most of them not involving CSS shadows.

5

Maybe I don’t understand what you mean, but can’t you do this with transparancy of the color you chose? I use tranparant breakpoint in my shadows sometimes to force the shadow to a 65% width or something. I can imagine you do that as well if you need the bottom to have no shadow at all. Just add a tranparant break point near the end and you have your “drop”.

6

@Diu. I’m not sure I understand. How are you changing the transparency of the drop shadow ?

If you have time - can you do a quick video ?

I also noticed that Safari and Firefox perform transparency considerably different than Chrome does.

Have not tested it with IE yet. But there are substantial differences.

I noticed when while reviewing the website via an ipad.

There was enough of a difference that I re-viewed the site on a desktop with Safari and FF.

7

Hi @Revolution, where I wrote shadow, I meant gradient. :dizzy_face:

To achieve what you want (i’m not exactly sure what that is, you write so many sentences):

  1. Make your content
  2. Make a wrapper div that exactly wraps the content you need.
  3. Give the div inner padding,
  4. Make a gradient for that div (as a fake drop shadow)
  5. Use transparant breakpoints to force gradient to stop at certain location.
8

sorry. I tend to write things a lot - in order to help people understand better.
maybe… with to much text - I’m not achieving that.

as for your method… that’s the direction I thought you were going in.

that could potential work. I will try it. thanks :smile:

I really do appreciate the help :smile:

1 Like
9

You could also make an SVG that looks exactly how you want your shadow to behave, then you could stretch it to match the height of your div on either side. SVG’s handle gradients really well…