UD5 Toolkit
CSS Variable Theme Builder - Online Light & Dark Mode
Define a set of colors for light and dark themes. Get the CSS custom properties snippet. Toggle live.
CSS drop‑shadow() Filter Generator - Online Box vs Text Shadow
Shadow Generator
Quick Presets
Subtle
Medium
Strong
Floating
Neon Glow
Sharp
Copy
filter: drop-shadow(8px 12px 16px rgba(15, 23, 42, 0.28));
Hello Shadow
drop-shadow(8px 12px 16px rgba(...))
box-shadow: 8px 12px 16px 4px rgba(...)
Aa
text-shadow
text-shadow: 8px 12px 16px rgba(...)
Frequently Asked Questions
What's the difference between drop-shadow() and box-shadow?
drop-shadow() is a CSS
filter function that follows the alpha channel (actual shape) of an element — including clip-path, transparent PNG areas, and SVG contours. box-shadow applies to the element's rectangular border box (though it respects border-radius). Use drop-shadow for irregular shapes, images with transparency, and SVG icons. Use box-shadow for standard rectangular containers.
Does drop-shadow() support spread-radius?
No. drop-shadow() only accepts
offset-x offset-y blur-radius color. The spread-radius parameter is exclusive to box-shadow. If you need to expand or contract the shadow area, box-shadow is your only option among these three.
Can I apply multiple shadows with drop-shadow()?
Yes! You can chain multiple
drop-shadow() functions within the same filter property, separated by spaces (not commas). Example: filter: drop-shadow(2px 2px 4px #000) drop-shadow(-2px -2px 4px #fff); For box-shadow and text-shadow, use commas to separate multiple shadows.
Does text-shadow support spread-radius?
No. text-shadow accepts only
offset-x offset-y blur-radius color, similar to drop-shadow(). Neither supports spread-radius — only box-shadow does.
Which browsers support CSS filter: drop-shadow()?
filter: drop-shadow() is supported in all modern browsers — Chrome 18+, Firefox 35+, Safari 6+, Edge 79+. It's safe to use in production. For IE11, it's not supported, but IE11 usage is negligible today.
Why does my drop-shadow look different on a PNG vs an SVG?
drop-shadow() follows the alpha channel of the rendered element. For PNGs, the alpha channel defines transparency per-pixel, so the shadow precisely follows the visible image contour. For SVGs, the shadow follows the SVG's rendered shape outline. Both behave correctly — the difference depends on the source graphic's transparency map.
Can I animate drop-shadow() with CSS transitions?
Yes! Since
filter is an animatable CSS property, you can transition drop-shadow() smoothly. Example: transition: filter 0.3s ease; This works great for hover effects. Note that animating box-shadow has better performance in some browsers due to GPU compositing differences.
CSS Drop Cap Generator - Online Fancy First Letter
Style the first letter of a paragraph as a large decorative drop cap. Choose font, color, and size. Get the CSS & HTML.
Vertical Text Layout Generator - Online writing‑mode CSS
Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
CSS Background Pattern Generator - Online Stripes, Dots & Checks
Create seamless CSS background patterns like stripes, polka dots, checkerboard. Adjust size and colors. Copy the tiny CSS.
CSS Text Stroke Generator - Online Outline Text Effect
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
CSS Grid Area Template Generator - Online Visual Naming
Visually name grid areas in a table and generate grid‑template‑areas CSS. Perfect for complex layouts. Drag‑free.
CSS Font Stack Generator - Online Fallback Fonts
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Critical CSS Extractor - Online Inline Above‑the‑Fold Styles
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
CSS Glassmorphism Generator - Online Frosted UI Design
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
CSS Glow Text Generator - Online Neon & Outrun Style
Create glowing, neon‑style text effects with multiple text‑shadows. Adjust colors and intensity. Copy the CSS.
CSS Star Rating Generator - Online Pure HTML/CSS Widget
Create a 5‑star rating widget using only HTML and CSS. Customize colors and size. Copy the clean code.
prefers‑color‑scheme Live Preview - Online Dark/Light
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
Rainbow Text Generator - Online Colorful Animated CSS
Create a rainbow gradient text animation using pure CSS. Customize speed and colors. Copy the code for your website.
initial‑letter CSS Playground - Online Drop Caps
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
initial‑letter CSS Playground - Online Drop Caps
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
text‑spacing CSS Demo - Online trim‑start & space‑first
New CSS text‑spacing property for fine control over punctuation spacing. See the effect live. For advanced typography.
CSS Mask Parallax Demo - Online Scroll Reveal Effect
Use CSS masks and fixed backgrounds to create a unique parallax reveal effect. Copy the code. No JavaScript.
CSS Property Sorter - Online Order Alphabetically or Box Model
Paste your CSS and sort the properties of each rule alphabetically or by concentric groups. Keep your stylesheets consistent without a build step.
Emoji Background Pattern Generator - Online Repeat CSS
Select emojis and arrange them into a seamless tiling background. Copy the CSS data‑URI or download as image.
:focus‑visible vs :focus Demo - Online Accessible Outlines
See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.
Background‑Blend‑Mode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
CSS Grid Auto Placement Demo - Online How Items Flow
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
box‑decoration‑break Demo - Online Inline Box Fragmentation
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.
content‑visibility: auto Tester - Online Render Deferral
Apply content‑visibility: auto to off‑screen sections and see the rendering cost drop. Demos for infinite scroll optimization.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
Auto‑Fill vs Auto‑Fit Visualizer - Online CSS Grid
Resize the container and see the difference between repeat(auto‑fill, …) and auto‑fit. Understand responsive grid behavior.
CSS Beautifier & Formatter - Online CSS Organizer
Beautify and format your CSS stylesheets instantly. Organize, minify, or prettify CSS code for better readability. Processed securely on client-side.
Neon Sign Text Effect - Online Glowing CSS Generator
Design a realistic neon sign text with multiple layers of glow. Copy the CSS and HTML. Perfect for headers.
scrollbar‑gutter Tester - Online Prevent Layout Shift
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.