Request details

Dim background (set tint + alpha) behind overlay

Love the new overlays feature! As an extended feature it would be great if you could choose what should happen to the background when the overlay appears. For example being able to dim the background by choosing a color and opacity.

This would help with darkening the background for modals etc.

21 votes
Sign in
Sign in with: facebook google
Signed in as (Sign out)

We’ll send you updates on this idea

Martin Klausen shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: facebook google
Signed in as (Sign out)
  • Arvid commented  ·   ·  Flag as inappropriate

    I mean I can use a rectangle at the moment, to simulate this, but if I use an animation for the overlay (e.g. slide in from the bottom) the background tint does slide in as well, when i rather want it to fade in ...

  • Stephen commented  ·   ·  Flag as inappropriate

    Agree that this would be a very nice addition to the overlay functionality. The workaround suggested by @dani is tedious and given that you can't position overlays below the fold, it means you're really limited.

  • Armando Scuro commented  ·   ·  Flag as inappropriate

    @Dani, that works great if you set the overlay transition to dissolve or none, but seeing the background slides as well is not something you see in any good app.

    tbh, I would be content (for now) if you automatically fade-in a 50% opaque black tint behind any overlay, similar to how it is in framer/framerX

  • Daniel Mee commented  ·   ·  Flag as inappropriate

    I like the workaround @Dani but if it could be made a simple part of the interface that would make it less cumbersome. » Background: Blur [amount] || Colour [picker], opacity [slider]

  • Sean S commented  ·   ·  Flag as inappropriate

    I agree. It would be nice to nest overlays into one another or point to 2 different overlays and trigger them with the click of one button. An example of this would be the iPhone share modal which slides up from the bottom of the screen a split second after a dark/blurred overlay dissolves in. This is quite a common action in smartphones' UI.

  • AdminDani Beaumont (Principal Product Manager | XD, Adobe) commented  ·   ·  Flag as inappropriate

    Martin -- You're request has been noted. In the meantime you can achieve this with the shipping version by completing the folowing steps:

    1. Make sure your Overlay artboard is the same size as the artboard you want to apply it to
    2. Create a rectangle the same size as the artboard, and check the Background Blur option
    3. Add the actual overlay content. The assumption here is that it is smaller than the parent artboard

    When you wire the artboard you should see overlay content with the blur background. If instead, you'd like a lighter or darker tint set the background container as white or black with a percentage fill (example 15%).

    Hope this helps

Feedback and Knowledge Base