Inner Shadow
Tom Krcha
shared this idea
46 comments
-
Simon Ferndriger
commented
The irony here (for me, at least) is, that the icon for the shadow color actually HAS an inner shadow ;)
-
Will
commented
Great work around for this issue
-
Chad
commented
I came up with a workaround that I haven't seen anywhere else. The object blur / mask method is better for allowing objects to be moved around with inner shadows following them (i.e. to update your interface design in the future). Nonetheless, I thought I'd post this method anyway in case anyone finds it useful.
(BTW, add me to the long list of people desperate to see inner shadow added as a standard feature...)
First, realize that an inner shadow of an object is logically equivalent to a drop shadow cast by the object's background. This alone might be enough to realize where I'm going...
Make a copy of the background (or if it's a plain white background, draw a white box). Remove the border. Make a copy of the object(s) you want to add the inner shadow to. After pasting, shift-select the background copy and use Subtract (ctrl-alt-s) to cut holes in the background. Then use CTRL-[ or CTRL-] as necessary to move the object(s) and/or background up/down layer levels until the drop shadow of the background covers the object.
If the original background itself had a border, then you'll have to position the borderless background copy *just inside* the border of the original background (zoom in a lot so you can line it up exactly).
-
Cody Turk
commented
Would be a nice option to have.
The way I got around it is to use the "Line Tool" and then to apply a "Object Blur". I like to use size 2.
-
JRo
commented
Wow, yet another simple option that is nonexistent?! Hmm.
-
Kyle Gallagher
commented
This was requested in 2016... um.... Guys? Did you see this? It has 300+ upvotes.. We gonna add this thing or what?
-
Anonymous
commented
This is seriously ridiculous.
Stop trying to merge all your tools together to reap more profit.
Focus on actually making this one tool useful!The irony of usability centric design tool that totally lacks...usability.
-
Mohammed Abdullah
commented
2.5 years later..
-
Anonymous
commented
must have!
-
Zach Bruce
commented
Any update on this? This is really important even though there are workarounds to get inner-shadows looking like they exist (Randy's suggestion below, or using gradients). At our web shop my developers have completely removed inner-shadows from form elements because they can't get instructions from Adobe Xd files / Zeplin inspects. It's something I didn't even realize was happening until I looked back on the year we started using Adobe Xd
-
Anonymous
commented
This is a must have!
-
David L.
commented
Yes, please!
-
Here's a technique for creating inner shadows in Adobe XD. Here's what I did in gif:
1. Create a Rectangle and give it a fat (20px) border
2. Set border color to background color (white)
3. Add Shadow with X=0, Y=0, B=15
4. Turn off Fill to get inner shadow
5. Draw a Rectangle over inner shadow, select both Rectangles, and Mask With Shape to remove outer Shadow.Shadow does not look good in gif, but hopefully this illustrates the technique.
Hope this helps,
Randy -
Anonymous
commented
lol.
-
Logan
commented
A way to get around this issue for now is to merge layers that have inner shadows before bringing it into XD
-
Logan
commented
Inner shadows and color overlays.... hook it up
-
Shantikumar
commented
Really much needed. +1
-
Guy Levin
commented
Much needed.
+1 -
Armando Scuro
commented
since you guys are working on CSS export, can we please have this soon as it goes hand in hand with that feature.
-
Farshad Sadri
commented
Upvote! 🙃
