I want to add the im­pres­sion of depth to this stack, and there­fore add some drop shad­ows to these five lay­ers. A sim­plis­tic at­tempt would be this: for each rect­an­gle, I add a black copy which is slight­ly shift­ed, blurred and faded. I can de­fine this op­er­a­tion as a fil­ter: take the alpha chan­nel of an ob­ject, smooth it with a Gaus­sian blur hav­ing a stan­dard de­vi­a­tion of 1 % of the can­vas size, shift the ob­ject 1 % of the can­vas size to the right and 0.5 % to the bot­tom, and re­duce the opac­i­ty to 75 % of the ini­tial value.

This sim­ple ap­proach isn’t too con­vinc­ing. Sup­pose the red rect­an­gle hov­ers one inch above the top­most green rect­an­gle, caus­ing the shad­ow the red rect­an­gle casts on this green rect­an­gle to be shift­ed one inch to the right. If the dis­tances be­tween the rect­an­gles and the white back­ground are all equal, then this means that the red rect­an­gles hov­ers five inch­es above the white back­ground, and the shad­ow it casts on the white back­ground should be shift­ed by five inch­es to the right, in­stead of just one.

Fur­ther­more, we might want the shad­ow which the red rect­an­gle casts on the back­ground to be more blur­ry and more faded then the shad­ow cast on the first green rect­an­gle.

I there­fore use a more ad­vanced model. To ex­plain it, we tem­porar­i­ly re­strict our­selves to just two rect­an­gles:

The red rect­an­gles casts a shad­ow…

…but I clip this shad­ow to the green rect­an­gle:

To con­struct the shad­ow of the layer of the green rect­an­gle, I take a black ver­sion of the green rect­an­gle and the full shad­ow of the red rect­an­gle:

Now I take this group of ob­jects and apply my fil­ter to them: I shift, blur and fade them, mean­ing that the al­ready shift­ed, blurred and faded shad­ow of the red rect­an­gle gets shift­ed, blurred and faded a sec­ond time.

While the shad­ow of the red rect­an­gle on the green rect­an­gle or the shad­ow of the green rect­an­gle on the white back­ground has an opac­i­ty of 75 %, the shad­ow of the red rect­an­gle on the white back­ground has an opac­i­ty of just 56.25 % (0.75 squared is 0.5625).

The next image shows the sim­plis­tic shad­ow on the left, the more ad­vanced shad­ow on the right:

Un­for­tu­nate­ly, there is a com­pu­ta­tion­al prob­lem with this ap­proach.

Blur­ring is a nu­mer­i­cal­ly cost­ly op­er­a­tion, and fad­ing, re­al­ized as a color ma­trix op­er­a­tion, is also cost­ly. With five lay­ers, we have to apply both op­er­a­tions 1 + 2 + 3 + 4 + 5 = 15 times, and in gen­er­al, with n lay­ers, we have to per­form both op­er­a­tions (n+1)·n/2 times, and with com­pli­cat­ed shapes, this is going to choke slow­er ren­der­ing en­gines.

To get con­vinc­ing shad­ows, the most im­por­tant part is that shad­ows are shift­ed with the cor­rect amount. Since fad­ing and blur­ring de­pend on more than just the vir­tu­al height of ob­jects any­way (the dis­tance of the light source, the re­flec­tiv­i­ty of the sur­round­ings, in­clud­ing the back­sides of our lay­ers), we might get away with cu­mu­lat­ing just the dis­place­ments, while ap­ply­ing blur­ring and fad­ing just once for every shad­ow.

The next image com­pares the ad­vanced ver­sion using cu­mu­la­tive blur­ring and fad­ing be­sides cu­mu­la­tive shift­ing (left side) with a sim­pli­fied ver­sion using just cu­mu­la­tive shift­ing (right side).

In the new ver­sion, the shad­ow of the red rect­an­gle on the white back­ground is a bit dark and hard, it is a bit too loud and at­ten­tion grab­bing and un­sub­tle. But per­haps we can get away with our sim­pli­fied ap­proach if we ad­just the pa­ram­e­ters: the next image com­pares the ini­tial pa­ram­e­ters with new pa­ram­e­ters of a fade of 67 % (in­stead of 75 %) and a Gaus­sian blur with a stan­dard de­vi­a­tion of 1.5 % (in­stead of 1 %):

For my taste and my pur­pos­es, that’s good enough.

As men­tioned above, I wrote an ex­ten­sion which adds such shad­ows au­to­mat­i­cal­ly. It works on all cur­rent­ly vis­i­ble lay­ers (which means that you can ex­clude lay­ers from get­ting shad­ows by tem­porar­i­ly mak­ing them in­vis­i­ble), and treats all ob­jects with­in one layer as hav­ing the same height. You can spec­i­fy the amount of hor­i­zon­tal and ver­ti­cal shift­ing (in pix­els), the amount of blur (as stan­dard de­vi­a­tion, mea­sured in pix­els) and the amount of fad­ing.

Unzip the con­tent of clshad­ows.zip with­in your Inkscape ex­ten­sion fold­er (which should be some­thing like ~/.inkscape/ex­ten­sions/ or C:\Doc­u­ments and Set­tings\{user­name}\Ap­pli­ca­tion Data\Inkscape\ex­ten­sions\ or C:\Users\{user­name}\Ap­p­Da­ta\Roam­ing\Inkscape\ex­ten­sions\ or some­thing sim­i­lar), and the ex­ten­sion will be avail­able as “Cas­cad­ing Layer Shad­ows…” with­in the “Ar­range” sub­menu of the “Ex­ten­sions” menu (after you restart­ed Inkscape).

Un­for­tu­nate­ly, some ver­sions of Inkscape have a bit trou­ble up­dat­ing their ren­der­ing of a doc­u­ment, so ap­ply­ing the ex­ten­sion might per­haps lead to the ap­pear­ance of ei­ther in­com­plete or strange shad­ows, like this:

This is sim­ply a mat­ter of an out­dat­ed dis­play: if you choose “View/Du­pli­cate Win­dow”, you should see the cor­rect ver­sion. An­oth­er method of forc­ing the dis­play to up­date would be to tog­gle the vis­i­bil­i­ty of all af­fect­ed lay­ers. Or you sim­ply se­lect one ob­ject and move it one pixel up and down, which should also be suf­fi­cient to up­date the dis­play.

This is a known prob­lem of Inkscape and not spe­cif­ic to my ex­ten­sion. If you are af­fect­ed by this bug, un­for­tu­nate­ly it means that you can’t use the live pre­view.

An­oth­er po­ten­tial pit­fall: blur­ring an ob­ject en­larges it, and a ren­der­ing en­gine tries to es­ti­mate how much larg­er it will be­come, and ad­just the draw­ing area ac­cord­ing­ly. Those es­ti­mates are rather dumb, and it’s pos­si­ble to give ren­der­ing en­gines a hint how much larg­er the draw­ing area should be­come. With­in the ex­ten­sion, I hard­cod­ed an area in­crease of 20 %, which should be suf­fi­cient in most cases. In the fol­low­ing ex­am­ple, I changed this to an in­crease of the draw­ing area of just 5 % of the cho­sen ob­ject and set the blur stan­dard de­vi­a­tion to 4 % of the can­vas size:

The top­most red rect­an­gle is es­pe­cial­ly prob­lem­at­ic, since it is rather slim, com­pared to the total can­vas size, and the fil­ter re­gion is there­fore much too small. But since I have cho­sen such ex­treme val­ues for the fil­ter re­gion and the blur, al­most all shad­ows get cut. If you choose very large val­ues for “blur”, and the shad­ows some­how look cut off, you can ad­just this by open­ing “Fil­ters/Fil­ter Ed­i­tor…”. The fil­ter in ques­tion is called “Cas­cad­ing­Drop­Shad­ow”, and you can ad­just its re­gion with the “Fil­ter Gen­er­al Set­tings”. For larg­er blur val­ues and small­er shad­ow-cast­ing lay­ers you need larg­er rel­a­tive fil­ter re­gions.

Fi­nal­ly, the ex­ten­sion is not re­al­ly in­tend­ed to be ap­plied two times to the same doc­u­ment. Es­pe­cial­ly, it would re­quire a fun­da­men­tal change in the code to make it pos­si­ble to use two kinds of shad­ows with­in the same doc­u­ment.