Can we do these type of internal box shadows

In Muse these internal soft shadows were really easy; I cannot find how they can be done without having to place transparent png’s on top of the box and then the text on top of that…

@iVivid, Sparkle doesn’t have that as a setting, but…

I’m not really a fan of inner shadowing of text boxes but I had a little play and came up with a hack, something like this.

The way I achieved this was…

  • Drop down a Box and narrow it down to a 16pt height
  • Fill it with a gradient and chose your colours from a solid colour down to a transparency
  • Duplicate the rectangle box three times and arrange it the way you want it and angle the gradients per side to give the inner shadow affect
  • Now drop down another Box and make it the same dimensions so to cover your 4 rectangles, plus make the colour of the box transparent
  • Now give that overlay Box a Background Filter of Blur 10
  • Now place your text box above all that and you have your textbox effect with inner shadow

You might be asking yourself that is a lot of work to replicate for all the other text boxes, but it is just a matter of copying what you have and altering it slightly for the other text boxes.

What I could add it that it would be far more striking, easier, and modern by using a Shadow effect on your containers like what I have mocked up here…

2 Likes

Unless it’s critical for your design I’d avoid using a full-surround shadowing of any kind. One thing Sparkle doesn’t do well (yet) is handle how shadows appear at different breakpoints, and it’s nearly impossible to make it perfect for all display sizes, especially when mixed with text. Kind of a nightmare combination, actually.

For now anyway you’re better off doing exactly what you’re doing now or, creating the shadow-box externally and importing it like another image element and then import text on top of that, then “group” them together so they don’t grow outside each others’ boundaries. Like I said, it’s a difficult combo for Sparkle.

1 Like

I agree; except I’m trying to please my client :smiley: Thanks for the work around!

1 Like