Fine-tune CSS shadow and backdrop-filter glassmorphism effects, export CSS instantly.
Fine-tune CSS shadow and backdrop-filter glassmorphism effects, export CSS instantly. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
This tool lets you design CSS shadows and frosted-glass effects with sliders, preview them live on a card, and copy CSS that is ready to paste into your project. In the Box Shadow tab, every layer has a horizontal and vertical offset (-50 to 50px), blur radius (0 to 100px), spread radius (-30 to 50px), color with opacity, and an Inset checkbox for inner shadows. The default output is box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); with colors written as rgba.
Click Add Shadow Layer to stack several shadows; they are joined with commas, and the first layer in the list is painted on top. Realistic shadows are usually made of a close, crisp layer plus a distant, soft one. The built-in 3D Double preset, for example, combines 0 5px 5px and 0 20px 25px in low-opacity black, which looks more natural than one big shadow. A negative spread makes the shadow smaller than the element, a common trick for soft drop shadows under cards, while the Glow Light preset uses a brand color, zero offset and a large blur to create a glow.
The Glassmorphism tab builds frosted-glass cards: adjust the backdrop blur (backdrop-filter: blur, 0 to 40px), the background color and its opacity, and the color and opacity of a 1px border. The generated CSS includes both backdrop-filter and the -webkit-backdrop-filter prefix Safari needs. The key to the effect is a semi-transparent background with something behind it; over a flat color the blur has nothing to blur, which is why the preview lets you switch between gradient and dark backgrounds.
A few practical notes: large backdrop-filter areas can be heavy on low-end phones, so use them on a handful of cards or a navigation bar rather than everywhere. Watch text contrast on translucent backgrounds; if the background opacity is low, darken the tint or use a heavier font weight. The rgba values work as-is with CSS custom properties or Tailwind arbitrary values. Everything runs in your browser, with no sign-up.
box-shadow accepts a comma-separated list, and the first shadow is painted on top, with each following one beneath it. Putting a small, sharp shadow first and a larger, fainter one after it creates convincing depth. In the tool, Layer #1 is the top layer.
With Inset checked, the shadow is drawn inside the element. It is useful for recessed input fields, pressed button states, or a subtle highlight along the top edge of a glass card; the Glass Inner preset uses a faint white inset shadow for exactly that.
backdrop-filter blurs whatever is behind the element, so the background color must be semi-transparent (opacity below 1) and there must be an image, gradient or other content behind it. Over a plain solid background the effect is barely visible. Also make sure your CSS keeps -webkit-backdrop-filter for Safari.
Current versions of Chrome, Edge, Firefox and Safari all support backdrop-filter; Safari needs the -webkit- prefix, which the generated CSS already includes. If you must support very old browsers, add a more opaque background color as a fallback.
Browse this category: Design & Color
Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
Upload your webpage screenshot, wrap it with a premium macOS browser frame, drop shadows, and beautiful gradient backdrops, and export high-res PNG.
