Is there anyway to set Box Shadow for negative values?

[deadcoder0904]

I really like Tailwind & if you see box-shadows, then they have it from all sides.

I would love to have the same approach in Konva but soon found out there is no way to add Shadow to the top or left. Am I correct?

Currently, I converted the .shadow-lg variant to Konva:

const boxShadowProps = {
	fill: 'white',
	shadowEnabled: true,
	shadowColor: 'rgba(0, 0, 0, 0.1)',
	shadowBlur: 15,
	shadowOffset: { x: 0, y: 10 },
	shadowOpacity: 1,
	shadow: -3,
}

return (
	<Rect
		width={800}
		height={600}
		x={20}
		y={20}
		cornerRadius={20}
		{...boxShadowProps}
	/>
)

But couldn't find a way to do it for negative values as well. Is there a way? Did I miss something?

[lavrton]

Canvas shadows are not that powerful as CSS shadows. As far as I know, you can't fully control every side with canvas shadows. As a hacky workaround, you may try to create several shapes with different shadows (different blurs and offset).

[deadcoder0904]

As a hacky workaround, you may try to create several shapes with different shadows (different blurs and offset).

Oh, that's a cool technique. I may try this or not but if I do, I'll make sure to post it as an answer :)