Design tool
CSS Shadow, Radius and Glass Generator
Build layered box shadows, custom border radius shapes (including 8-value blobs) and glassmorphism with a live preview. Copy CSS or Tailwind classes.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Presets
Layer 1
Layer 2
Preview
Code
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
0px 2px 4px -2px rgba(0, 0, 0, 0.1);shadow-[0px_4px_6px_-1px_rgba(0,_0,_0,_0.1),0px_2px_4px_-2px_rgba(0,_0,_0,_0.1)]
How to use the css shadow, radius and glass generator
Three CSS effects in one place
Shadows, rounded corners and frosted glass are the details that make an interface feel finished. This generator lets you shape each one visually and copy the code as plain CSS or as Tailwind classes.
Box shadow
Start from a preset or add layers. Each layer has horizontal and vertical offset, blur, spread, colour and opacity, plus an inset option for pressed or recessed looks. Use two to four faint layers instead of one dark one: it mimics how real light falls off. Change the preview background to check your shadow on light and dark surfaces.
Border radius, including organic shapes
The simple case is one value for all corners. The advanced case is the eight-value syntax, where each corner has its own horizontal and vertical radius. Untick "Same horizontal and vertical radius" and drag the sliders to produce blobs, leaves, eggs and tabs. Percentages scale with the element, while pixels stay fixed. Presets such as Pill, Circle and Blob help you start.
Glassmorphism
Set background opacity, blur, saturation, border opacity and radius. The code includes backdrop-filter and the -webkit- prefix for older Safari, a thin translucent border for the edge highlight and an optional soft shadow. Place the card over a vivid background in your own design.
Accessibility and performance
- Contrast first. Text on glass must still meet 4.5:1 against the blurred background.
- Do not overuse blur. Large blurred areas are costly on low-end phones.
- Offer a fallback such as a solid semi-opaque background if backdrop-filter is unsupported.
- Keep shadows subtle so they help depth without looking dirty.
Copying the result
Each generator shows CSS and a Tailwind class string. Both are copy-ready. The Tailwind classes use arbitrary values with underscores for spaces, which work in Tailwind 3 and 4.
Frequently asked questions
How do I make a layered shadow?
Add several layers with small offsets and low opacity. Stacked soft shadows look more natural than one heavy shadow. The Layered preset shows a good starting point.
What is the 8-value border radius?
Eight values describe each corner as an ellipse: four horizontal radii, a slash, then four vertical radii. It creates blobs, leaves and eggs. Untick the link option to edit them separately.
Why is my glass effect invisible?
Glass needs something colourful behind it to blur. Put it over an image or gradient, and check the browser supports backdrop-filter (all current browsers do).
Does the Tailwind output need a plugin?
No. It uses arbitrary-value classes like shadow-[0_4px_6px_rgba(0,0,0,0.1)], supported in Tailwind 3 and 4.
Are these effects 3D?
No. They are flat 2D styles: shadows, rounded corners and blur. No transforms or perspective are used.
Is anything uploaded?
No. The generator runs in your browser.