CSS Shadow Generator
Visually adjust shadow parameters with multi-layer support. Copy ready-to-use CSS with one click.
- Select the Box Shadow or Text Shadow tab.
- Adjust the horizontal offset, vertical offset, blur radius, color, and opacity.
- Click "Add Layer" to stack multiple shadow layers.
- Once satisfied with the preview, click "Copy CSS" and paste it into your stylesheet.
What is the difference between box-shadow and text-shadow?
box-shadow applies to the entire element box (div, button, etc.), while text-shadow applies only to the text itself. The former supports inset and spread; the latter does not.
Can I stack multiple shadow layers?
Yes. CSS allows multiple shadow values separated by commas, with earlier layers appearing on top. This tool lets you add multiple layers and preview the stacking in real time.
What does inset do?
Adding inset makes the shadow appear inside the element rather than outside. It is commonly used for pressed button effects or inner highlights. text-shadow does not support this property.
What is a negative spread useful for?
A negative spread shrinks the shadow. Combined with a larger offset it creates a natural one-sided drop shadow effect.
JPG, PNG, WebP, or GIF? A Complete Guide to Choosing the Right Image Format
Why is a PNG screenshot sometimes ten times larger than the same image saved as JPG? When should you use WebP? Is GIF obsolete? This guide explains image compression fundamentals and gives you a clear decision framework for every situation.
Social Media Image Editing Workflow: Sizes, Visual Consistency, and Export Settings
Great social visuals come from process, not luck. Learn a repeatable image editing workflow that covers dimensions, composition, brand consistency, and output settings for high-performing posts.
How to Merge, Split, and Compress PDFs: A Complete Guide to Everyday Document Management
Need just two pages from a 30-page contract? Have five separate reports to combine before a meeting? File too large to upload? This guide walks through the four most common PDF operations — no software installation required.
How to Compare Text Differences? A Complete Guide to Diff Algorithms and Text Comparison Tools
Text diffing (diff) is a technique for finding differences between two documents, widely used in version control, code review, and document revision. This guide explains diff algorithm principles, common output formats, and practical use cases.
The Complete Markdown Guide: From Basics to Real-World Applications
Markdown is the go-to lightweight markup language for writers, developers, and content creators. This guide covers everything from core syntax to advanced techniques and platform-specific applications.
Data Visualization Basics: How to Choose the Right Chart Type
Bar chart, line chart, pie chart, scatter plot — with so many options, how do you pick the right one? This guide walks you through a decision framework based on data type and communication goal, helping you avoid common visualization mistakes.