UI Element Generator
Design polished UI surfaces in your browser and copy the CSS. Switch between glassmorphism, neumorphism and an iridescent holographic rim, pick a pill, button or card shape, tune every value live, watch text contrast, then copy ready-to-paste CSS, Tailwind or SCSS.
Preview
Style and shape
Presets
Controls
Code
What are glassmorphism, neumorphism and iridescent styles?
Glassmorphism is a frosted-glass surface: a translucent fill over a blurred backdrop with a thin border and soft shadow. Neumorphism, sometimes called soft UI, uses one solid color for the element and its background, then a pair of light and dark shadows to make the control look pressed out of or into the surface. The iridescent option adds a thin holographic rim by painting a rainbow conic gradient on the border, which gives the chromatic, light-refracting edge you see on premium buttons.
Browser support and graceful fallback
The glass blur relies on the backdrop-filter property, which modern Chrome, Edge, Firefox and Safari support, with Safari needing the -webkit-backdrop-filter prefix that this generator always includes. Where it is unsupported, the translucent background color still shows. The neumorphic and iridescent recipes use box-shadow, border and gradients that are broadly supported, so they hold up well across browsers.
Keep it accessible
Soft, low-contrast surfaces are the part of these styles that most often hurts readability. This tool estimates the contrast between your label text and the element surface and warns you when it drops below the readable threshold. For a deeper check, pair it with the Color Contrast Checker and preview it with the Color Blindness Simulator.
Frequently asked questions
What is a UI element generator?
A UI element generator is a visual tool that lets you tune a component such as a button or card and copies the matching CSS for you. This one covers glassmorphism, neumorphism and an iridescent rim, with live preview and code export in CSS, Tailwind and SCSS.
How do I create a glassmorphism effect in CSS?
Set a semi-transparent background color, add backdrop-filter: blur() with the -webkit- prefix, round the corners, add a thin translucent border and a soft shadow. Pick the Glass style here and the generator builds that exact CSS as you adjust the controls.
How do I make a neumorphism effect?
Use the same color for the element and its background, then add two box shadows: a dark one offset toward the bottom right and a light one offset toward the top left. Pick the Neumorphism style and choose raised or inset to flip the direction of the depth.
How is the iridescent holographic border made?
The rim is a transparent border filled by a rainbow conic-gradient using the border-box clip, layered over a solid fill on the padding-box. Adjust the rim width and angle to move and resize the chromatic highlight around the edge.
What is the difference between glassmorphism and neumorphism?
Glassmorphism uses transparency and a background blur so elements look like glass over a scene. Neumorphism uses matching foreground and background colors with inner and outer shadows to make controls look extruded from a solid surface, with no transparency.
Can I export the design to Tailwind or SCSS?
Yes. Use the format tabs above the code box to switch between CSS, Tailwind utility classes and an SCSS mixin, then copy the result with one click. The output updates live as you change the controls.