An extension for Visual Studio Code that easily adds beautiful shadow effects to images. Transform your images into a polished look for blog posts and documentation.
Make your images stand out with material design style shadows!
Features
✨ Material Design Shadow Effects: Creates natural, dimensional shadows with a two-layer structure (Ambient & Key Shadow)
📐 Rounded Corners: Round the corners of your images for a modern look
🖌️ Customizable Borders: Freely set the color, width, and opacity of borders
🔄 Transparent Background Support: Works with transparent PNG images
🎛️ Detailed Settings: Fine-tune shadow density, blur, offset, and more
🚀 Easy Operation: Intuitive usage via command palette or context menu (right-click)
Installation
From VS Code / Cursor Extension Marketplace
Open the VS Code Extension Marketplace (Ctrl+Shift+X or Cmd+Shift+X)
Search for "Image Shadower"
Click "Install"
From .vsix File
Download the latest .vsix file from the Releases page
Open VS Code and display the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
Select "Install from VSIX..." from the ... menu
Select the downloaded .vsix file
Usage
Method 1: Context Menu from Explorer
Right-click on an image file (PNG, JPG) in the VS Code Explorer
Select "Add Shadow (Single Image)" from the context menu
When processing is complete, a new file with [original_filename]_shadow.[extension] will be created in the same folder
Method 2: From Command Palette
Open the VS Code Command Palette (Ctrl+Shift+P / Cmd+Shift+P or F1)
Type "Add Shadow"
Select "Add Shadow (Single Image)" for single image processing
A file selection dialog will appear; select the image you want to process
Method 3: Batch Processing Multiple Images
Open the VS Code Command Palette
Select "Add Shadow (Multiple Images)"
A folder selection dialog will appear; select the folder containing images you want to process
All PNG/JPG images in the selected folder will be processed
Customizing Settings
Open VS Code settings (Ctrl+, or Cmd+,)
Search for "Image Shadower"
You can customize the following settings:
Ambient Shadow
Setting
Description
Default Value
imageShadower.shadow.ambientShadow.opacity
Opacity of ambient shadow (0-1)
0.08
imageShadower.shadow.ambientShadow.blurRadius
Blur radius of ambient shadow (px)
30
imageShadower.shadow.ambientShadow.offsetX
Horizontal offset of ambient shadow (px)
0
imageShadower.shadow.ambientShadow.offsetY
Vertical offset of ambient shadow (px)
0
Key Shadow
Setting
Description
Default Value
imageShadower.shadow.keyShadow.opacity
Opacity of key shadow (0-1)
0.28
imageShadower.shadow.keyShadow.blurRadius
Blur radius of key shadow (px)
12
imageShadower.shadow.keyShadow.offsetX
Horizontal offset of key shadow (px)
8
imageShadower.shadow.keyShadow.offsetY
Vertical offset of key shadow (px)
8
Border and Rounded Corners
Setting
Description
Default Value
imageShadower.borderRadius
Radius of rounded corners (px, 0 to disable)
5
imageShadower.stroke.width
Width of border (px)
1
imageShadower.stroke.color
Border color (hexadecimal color code)
#CCCCCC
imageShadower.stroke.opacity
Border opacity (0-1)
0.8
Other
Setting
Description
Default Value
imageShadower.margin.size
Margin added to transparent PNG images (px)
20
Troubleshooting
Q: What if image processing fails?
A: Processing may fail with very large images or special formats. Try using common PNG/JPG formats with appropriate sizes.
Q: What if transparent background processing results differ from expectations?
A: Images with complex transparency patterns may not be fully supported. Try adjusting the margin width in settings.
Q: What if shadow effects are extremely dark/light?
A: Try adjusting the opacity of both ambient and key shadows in settings. Slightly denser settings work well for bright images, and lighter settings for dark images.
Development
Prerequisites
Node.js (v14 or higher)
npm or yarn
VS Code
Build Process
# Install dependencies
npm install
# Development build
npm run compile
# Create production package
npm run package
Feedback & Contributions
Please report bugs or feature requests on GitHub Issues.
