 In the past episodes of Plasma Theme, we've seen how to make shadows for your Plasma Theme. However, those shadows are not very natural. If you look at them, they're the same radius all around and they don't look very casted by a light. If they're casted by a light from the top, they should be darker on the bottom and such. So how can we make them more like that? So the first easy answer would be let's just use a drop shadow, which we know to work. However, we can't do that nor we can't do that in CSS because it's SVG and we can't even use the SVG filter for that because the QT thingy that we use don't support it. So how can we achieve that effect anyway? As you know, we need to make the eight parts of the shadow left, right, top, bottom and the four corners. But let's actually forget about those for a second. Now let's imagine to just imagine our perfect shadow. So let's pop up CodePen with CSS or Inkscape and let's try to design it. If you have CodePen and CSS, you can do a drop shadow. Just put, you know, the offset X and Y, the radius, the inset and the color of the shadow. Whether, whereas sorry, Inkscape just use the blur effect and then move the shadow a bit to the bottom to make it seem like it's casted. So just like that, we can design a shadow that fit our tastes. As advice, make this shadow a bit darker than what you would expect as it's our first try. And if it goes wrong, you can always dim it a bit later on. So now that you have a shadow, make sure that it is white on white. Whereas the white element is both the background and the element that's casting the actual shadow. That is because I've written a little Python script that you can find in a link in the video description to actually generate the shadow for you to a certain extent. There's still some work to do manually as we'll see. So just download that script, install Python 3.8 or 3.7 if you don't have it already. You should have it already, hopefully. And then just take a screenshot of the shadow you want. Again, white on white and put it in the same folder as the script and run the script, giving it the name of the file you want. Now that you've done that, my script will output all the gradients that are necessary for that shadow on the four sides. Take as a reference the left and right shadows that should be mostly the same. Hopefully they are exactly the same, which means that everything gone well. And in theory, the different ones should be the one at the top, which should be lighter and the one at the bottom which should be darker if you had a light at the top in your mind. If you put it like on the bottom on the left, you have to rotate what I'm saying accordingly. Now that you've done that, get back to Inkscape and let's actually make the four rectangles for your shadow. You need a left one, a right one, top one and bottom one as a starter. And let's focus on those. So first of all, keep in mind that the width of the left and right shadow is going to be in between the height of the bottom and the top shadows. The top shadow is going to be smaller, whereas the bottom one is going to be thicker. Now, in order to actually understand the ratio between those, you can again use my script that outputs those. Now that you've created the four elements of appropriate size, you need to create the gradients and for those start with the left and right shadows, which again should be exactly the same. What you do in those case is you get the element and then you select a gradient as a background color. And then you get to edit gradient and you add as many points as possible so that the number is the same as the one that you put into my Python script. So if you want to do a super accurate shadow, put like 10, which is a lot, and then make 10 nodes in the gradient. Whereas if you want a less realistic shadow, just go with three or four. Personally, I think I went with five for the breeze theme. So now that you've done that and remember that all points should be the same distance between them themselves, just go to my script again and copy paste. I mean, not copy paste, but read the transparency values that the program outputs and put those as the transparency values for each node. So it starts with the most opaque one and then it goes down into the most transparent one. This is because the gradient shadow, if you just have two nodes, the starting one and the ending one will be linear. Whereas shadows are not linear, they have a different shape, which I don't know what it is mathematically. If you know, please let me know because I'm very curious. But my program just reads it off from the Gaussian blur that we used before and we can actually see what that one is. So now that you've done that, you should have a realistic shadow for the left and the right parts. If you don't want to use black, please, please still use a black image for my script. Read the transparency values and then use those in your inkscape file while using a different color. If you use a red shadow for my pattern script, it won't work. So don't do that, just do it later. Then when you've done that, you have the two shadows. We need to do the bottom one and the top one and it's very similar. Again, create points that are the same distance and then you can use my script to actually fill in the transparency values for the single nodes. Now, how do you do the same points of the same distance for each element? So if you have, as an example, 10 points, then resize your element to be 10 units taller. Use a grid for this in inkscape and then insert one point for each grid element. I think it's actually nine because we're counting the bottom one and the top one. And when you've done that, you have the 10 points and then you can actually resize the element back to its original size and the elements will stay equidistant. When you have those elements, both bottom, left, right and top, you can see that the shadow almost works and what's missing is only, of course, the corners, which are actually the most difficult parts. So let me just say that how much you can make the shadow realistic is proportional to the corner of the shadow or rather the element which is casting it. So if it's like a square box, you're done. If it's more rounded, then you can do it. Maybe that's why Windows went with square corners. I'm just kidding. And then just create the four elements. In this case, you need to play a bit with nodes and to make just as you're seeing in the video right now, I'm doing it in the video. It's easier to see than explain it in words. But again, just use one, two, three, four, five nodes while drawing and then drag on the top right one to make a nice curve that represents your corner. When you've done that, those four elements just copy paste them, rotate them, so they're all the same all around. You can use gradient shadow, but this time the one that I don't remember the name, it's like a circle, sorry. And those can actually, it's not actually a circle. You can make it an ellipse, which is the whole point of this. So what are you going to do for all four of them? Let's start with the top ones. They're easier. Make it the same as the left one as in the nodes. So you make the same number of nodes and then you make the same transparency and distance between them. When you've done that, you can see that it will be the same on the top as well. But you can resize the top gradient to be higher or smaller compared to the left one. Of course, the left one should be the same size as the one that's underneath it, so the one in the left element, whereas the highness of the gradient, the ellipse shadow, sorry, gradient, should be the same high as the shadow, or sorry, again, the gradient in the top element. This way it looks nicely as you're connecting the two. However, it won't be perfect because of course it won't. What you can do is just manually see if making the shadow a bit more like a circle or a bit more like an ellipse will make it more realistic. In my case, I did I think one node, so when you need smaller compared to the top element. Then there is the bottom one. The bottom one is a bit harder. And one little difference, again, we can do the whole thing of making the shadow an ellipse and with the same nodes as the left element. But this time we also need to set in the very first node, which is inside actually of the element, black. And then you will edit the transparency of that node to make it look good later on. We'll see why. So again, make the left radius of the ellipse the same as the width of the gradient on top of it. And then make the height of the ellipse the same as the gradient, which is on the bottom element. When you've done that, you will see that it doesn't work. So first of all, get back to the node that I've told you to make straight black, which is the very one in the corner and change its transparency until it fits the one, the element in the bottom. So it looks like you're passing from the corner to the bottom shadow nicely. When you've done that, you will see that it still doesn't work because sure, it's similar at the top, but the bottom shadow is different. So what you're going to do is actually to see that if you edit the gradient of the bottom element, you have nodes. If you edit the element of the corner, you have different nodes in different positions. So you will manually create those nodes for the ellipse. Then you check those values in the ellipse and put those values back in the bottom shadow. These will make it different from the one that you were using in my Python script, but it will nicely go from the corner to the bottom. Again, if you have a bigger corner, then it's less likely for this problem to happen. If it's smaller, like the plasma one, the sorry, breeze one, it probably will happen, but it's not a big issue. You just need to replace the bottom values. When you've done that, you should be done. So they zoom and look that everything fits nicely and tidy. Now, potentially, you could make it perfect even with a very small corner radius. So how you do that is that instead of having one element for the corner, you would actually extend it so that the corner element has both the corner and a bit of the left element and a bit of the right element, which is a bit difficult to make. You should probably copy paste the left bottom elements, then make them smaller and then group all together to one element and then make that one the shadow corner. Oh, by the way, of course, put shadow bottom left shadow left shadow top left has ideas, but you should already know how to do that, hopefully. And by grouping them together, you can now make the gradient a bit more realistic. However, how to actually do that? I haven't investigated because I hadn't the need for and it sounds very complicated. If you want to explore it, then I'll just give you the hint. This is how you should do it. And if you're able to do something very pretty that has very small corner radius, but still gets a very realistic shadow, please email me so I can update, do a new video about it or something. And that should be it. If you have any question, I'm available. This is something that I took a bit of time to experiment, find the right value. So don't worry if you're going to take your time. And I've also made a video while trying to find the perfect shadow is I think one hour longer, maybe even more. It's very boring. But if you want to see me actually investigating this problem, actually investigating this problem for myself, like there's that video as well. And that should be it. If you have any problem, don't just ask me.