How to achieve inset shadow effect in WPF

11,658

You could try something like this, tweaking the thicknesses accordingly:

<Border Background="LightGray" BorderBrush="DarkGray" 
           BorderThickness="1" ClipToBounds="True">
  <Border Background="Transparent" BorderBrush="Black" 
              BorderThickness="0 2 7 0" Margin="-2">
    <Border.Effect>
      <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
    </Border.Effect>
  </Border>
</Border>
Share:
11,658
Chris
Author by

Chris

Updated on June 03, 2022

Comments

  • Chris
    Chris almost 2 years

    I have designed an interface in HTML and wish to translate this into WPF but am having troubles with inset shadow.

    box-shadow: inset 0 2px 7px 0 rgba(0, 0, 0, 0.5);
    

    The effect im looking for is here in this jsFiddle, how can I translate this into WPF exactly?

    Update

    What I currently have based on Richards answer is below, its still not showing a shadow though?

    <Border Grid.Row="1" CornerRadius="3" Grid.Column="0"  Margin="13,0,12,0" BorderThickness="0"  BorderBrush="#d2d2d2" ClipToBounds="True" Background="#fff0f0f0" >
        <Border Background="Transparent" BorderBrush="Black"  CornerRadius="3" BorderThickness="0" Margin="0">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="2" BlurRadius="7" Color="Black" Direction="270" Opacity="0.5"/>
            </Border.Effect>
        </Border>
    </Border>
    
    • George Filippakos
      George Filippakos about 11 years
      Doesn't WPF use IE7 compatibility mode for rendering? IE7 doesn't support box-shadow