Six CSS effects, each with a live preview drawn by your browser and the CSS to copy:
- Border radius: all eight values (a horizontal and a vertical radius for each corner), so you can make blobs, leaves and eggs, written in the shortest form CSS accepts.
- Glass (glassmorphism): a translucent tint,
backdrop-filter blur and saturation, a light border, with the -webkit- prefix and a fallback for browsers without backdrop filters, plus an estimate of the text contrast over the backdrop. - Neumorphism: soft "extruded" or pressed surfaces from one base colour, in flat, concave, convex and pressed variants, with the edge contrast measured.
- Text shadow: several layers, with glow, outline and retro presets.
- Filters: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia, on a sample picture or your own image (shown locally, never uploaded).
- Clip path: triangles, polygons with any number of sides, stars with an adjustable inner radius, arrows, chevrons and speech bubbles; the value stays editable.
Elliptical border-radius in one paragraph
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% means: before the slash, the horizontal radii of the top-left, top-right, bottom-right and bottom-left corners; after it, their vertical radii. With percentages, each radius is relative to the box's width (horizontal) or height (vertical), so the same value makes a different shape on a wide box. When the two lists are equal the slash disappears, and like margin, four equal values collapse to one: 16px 16px 16px 16px is written 16px.
Glassmorphism without unreadable text
The glass look is a semi-transparent background plus backdrop-filter: blur() on whatever is behind it. Two things decide whether it works:
- Readability. Text on glass is read against the blurred backdrop mixed with the tint. The tool estimates that colour for each colour of the chosen backdrop and reports the worst contrast: white text on 20% white glass is about 12.6:1 over black but close to 1:1 over a white area. WCAG AA asks 4.5:1 for body text and 3:1 for large text. More tint opacity or a darker tint fixes most failures.
- Support and cost.
backdrop-filter works in current Chrome, Edge, Firefox and Safari; Safari before version 18 needs -webkit-backdrop-filter, which the output includes. Without support, the fallback rule makes the panel more opaque so text stays readable. Blurring is done on the GPU every frame something behind changes, so large glass panels over video or scrolling content can make cheap phones stutter.
Neumorphism and contrast
Neumorphism draws two shadows from the base colour: a darker one down and right, a lighter one up and left, on a background of the same colour. With the default settings (base #e0e5ec, 15% intensity) the shadows are #bec3c9 and #e5e9ef, and the dark edge reaches only about 1.4:1 against the background. WCAG 1.4.11 asks for 3:1 on the visual boundary of controls, so a soft-UI button is hard to see for many people. The tool shows the ratio; keep the style for decoration, and give buttons a border, an icon or a text label too.
Filters and clip paths
Filter functions run in the order written: grayscale(100%) sepia(60%) is brown, sepia(60%) grayscale(100%) is grey. Only values that change something are written, so a reset filter is none. Clip paths cut the element's painting, not its layout box, and they also clip its box-shadow; for a shadow around a clipped shape, put filter: drop-shadow() on a wrapper. Regular polygons are computed exactly: a hexagon with a flat top has vertices at 6.7% and 93.3%, which is 50 − 50 × sin 60°.
For accessible colour pairs, check them in the colour tools; for layered box shadows, use the box shadow generator; and for backgrounds, the CSS gradient generator. The article glassmorphism and neumorphism that stay readable walks through fixing the contrast of both styles with real numbers.
