Request details

Support all the same attributes as CSS box-shadow (add spread & inner shadow)

In short:
Be able to apply the same CSS box-shadow attributes on UI elements in Xd.

Long version:
Shadow on Xd works fine but still limited compared with CSS box-shadow capabilities. It's frustrating to be limited to 3 values only (x, y and B) when you know you can deliver better shadows in development.

The attributes should be similar to make the transition from design to development (or sometimes from development to design) easy. For example, in Photoshop it is tricky because the units are different (like spread as % in PS and px in CSS) and you can't get negative values for these attributes in PS.

I know you can export your design to CSS in PS, which is great for a general tool. But for Xd, I believe you shouldn't need to "convert" things for web because they are in the same context. A UI developer should be able to use your design in Xd as reference just looking for the UI's attributes.

Thanks in advance.

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

We’ll send you updates on this idea

Fabio Dan shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


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

    if you guys are working on css export, please fix the shadow settings and add spread and inner shadow first.
    because no developer wants a messy code that they have to fix and rewrite

  • Alex commented  ·   ·  Flag as inappropriate

    I was shocked that the spread settings are still not in the XD.

  • Anonymous commented  ·   ·  Flag as inappropriate

    The lack of this feature is keeping me from switching from Sketch to XD.

    I am currently working on a project where I need the elements on the page to look like they glow like neon lights. When I apply a shadow to the elements in XD, because of the lack of the spread feature, I am not able to provide this effect. Sketch has this feature, and XD needs to incorporate it as well.

  • AdminPeter Flynn (Software Engineer, Adobe) commented  ·   ·  Flag as inappropriate

    Is there anything missing aside from spread (both positive & negative) and inner shadow?

    If not, maybe we can turn this into a request focused specifically on spread. We already have separate requests for these other shadow features:

    * Inner shadow:
    * Multiple shadows (and fills/strokes):

  • james guest commented  ·   ·  Flag as inappropriate

    ok - what's happening with this request. I see tags on others about them being filed or worked on. This is a fundamental feature for an interface design program. please give us an update.

  • HG commented  ·   ·  Flag as inappropriate

    I agree. Working with shadows (aka wanting to make them look good) is still a pain in the butt in illustrator or sketch.
    You always need 2 layers (one with the object and one with the shadow) to make the shadows look good. This makes it a drag to resize and copy or edit these objects.

  • Leonardo Hauschild commented  ·   ·  Flag as inappropriate

    @corey Seems to me that having XD work for many platforms doesn't invalidate the "CSS box-shadows are needed" argument though.

    To replicate material design's shadows in ps/ai/sketch i only seem to get things right when using multiple shadows on one object with multiple "spreads".

    One can thus propose that the css standard can work well also for other platforms, don't'ya think?

  • AdminCorey Lucier (Adobe) (Admin, Adobe) commented  ·   ·  Flag as inappropriate

    Hi Fabio! We will be evolving things here soon (inner shadow, more shadow attributes, etc). But also keep in mind that XD is a tool for designing for many platforms, e.g. web but also native desktop and device UI.

Feedback and Knowledge Base