0

Recently while working on a project with a developer, I was asked by him to only use box shadows and simply using the blur effect on a rectangle does not produce the same CSS effect. I am using Figma for design.

Is there a rule/principle that says one should only be using box shadows? At least that's what I got out of the conversation with the developer. I understand this is not a technical question more of opinion & hence subjective. Thanks!

2
  • 1
    I don't think there's as such rule which says always use box shadows instead of blur effect.
    – Vikas
    Jul 10, 2021 at 15:08
  • 1
    Blurs may actually take a bit longer to render.
    – Scott
    Jul 10, 2021 at 19:32

2 Answers 2

1

Is there a rule/principle that says one should only be using box shadows?

Yes, and it is that the developer asked for it. The thing is that a company can simply have some design rules.

In this specific case, a shadow does not need an additional DIV element, a blurred rectangle probably does.


Besides that, no. You could make a webpage using blur all over the place if you want.

The point here is if the browsers you think your users will use, supports it. There are a few that does not support CSS filter effects, (blur is one of them) https://caniuse.com/?search=CSS%20filter

1
  • 1
    Browser support for CSS filters these days is pretty good as the chart shows - only the old IE (which the vast majority of companies have dropped support for) doesn't support it. Jul 11, 2021 at 12:52
1

I was asked by him to only use box shadows ... this is not a technical question

I highly suggest asking your developer why he made this request. I'm guessing that the reason is technical, namely because blurring is quite an expensive operation compared to most shadows. It could be because of design reasons but the much more likely reason is that many blurs or blurs over large content are very slow to render and can make the experience worse.

With that being said, there are ways to minimize the performance impact of blurs (and shadows and whatever else), namely baking them into assets so that the actual blur effect doesn't happen at run time.

But this is a conversation you should have with your developer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.