Glassmorphism Generator

Both styles manipulate blur and shadow to fake depth, but glassmorphism fakes transparency over a vivid background while neumorphism fakes relief over a solid background of the same color.

Glassmorphism combines three ingredients: a semi-transparent background (`background` with low alpha), `backdrop-filter: blur()` to blur whatever sits behind the element, and a subtle light border to mimic the edge of real glass, the effect only reads visually when there is something vivid or colorful behind it to blur, over a flat background the transparency barely shows. Neumorphism uses the opposite technique: no transparency at all, the element shares the exact solid color of its background, and the relief comes entirely from two opposing shadows, a light one simulating light hitting from one side and a dark one simulating the cast shadow on the opposite side. Flipping those shadow positions with `inset` turns the same element from "raised" into "sunken" (pressed), useful for simulating a button's `:active` state. Shadow colors shouldn't be a generic gray, deriving them from the base color itself (lightening and darkening its HSL lightness) keeps the result consistent with the rest of the palette.

Pick the mode, adjust the parameters and copy the CSS.

1. Switch between Glassmorphism and Neumorphism at the top, both modes keep independent settings.
2. Pick a preset as a starting point or adjust manually: blur, transparency, color and border for glass, or base color, distance and shadow intensity for neumorphism (with raised/pressed).
3. Copy the ready CSS, including the -webkit- prefix Safari needs for glassmorphism, or switch to Tailwind.

Use this tool on your site

<iframe
  src="https://jkit.tools/embed/en-US/glassmorphism-generator"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="Glassmorphism Generator"
></iframe>

Sources and references for this tool

These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.

• backdrop-filterMDN Web Docs, Syntax and browser support for backdrop-filter.
• box-shadowMDN Web Docs, box-shadow reference used for the neumorphism shadows.
• Understanding SC 1.4.11, Non-text ContrastW3C WAI, Basis for the contrast criterion cited on the neumorphism accessibility page.

Frequently asked questions

Where to go next