Inner shadow of the element

How-to Discussions
1

Hello! How do I make the inner shadow of an element?

2

There is no “inner shadow” element in Fuse, but you could create something like that yourself. Here’s my take on it:

<App>
	<DockPanel Width="120" Height="120" Alignment="Center">
		<Text Layer="Overlay" Value="text" Alignment="Center" />
		<Rectangle Width="1" Dock="Left" Margin="0,4">
			<Shadow Color="#000" Distance="2" Size="4" Angle="180" />
		</Rectangle>
		<Rectangle Width="1" Dock="Right" Margin="0,4">
			<Shadow Color="#000" Distance="2" Size="4" Angle="0" />
		</Rectangle>
		<Rectangle Height="1" Dock="Top" Margin="4,0">
			<Shadow Color="#000" Distance="2" Size="4" Angle="90" />
		</Rectangle>
		<Rectangle Height="1" Dock="Bottom" Margin="4,0">
			<Shadow Color="#000" Distance="2" Size="4" Angle="270" />
		</Rectangle>
		<Rectangle Layer="Background" Color="#fff" StrokeWidth="1" StrokeColor="#0004" />
	</DockPanel>
</App>
3

Thank you! :slight_smile: