I Built a Zero-Dependency Glassmorphism & Neumorphism CSS Generator (Vanilla JS) 🚀

Black Hat — Mon, 09 Nov 2026 09:02:16 +0000

Whenever I needed a quick Glassmorphism card or a Neumorphic button for a project, I found myself fighting with bloated UI generators, generic templates, or massive CSS frameworks.

I wanted absolute control over the shadow math, the blur, and the cyber-aesthetic glows—without installing a single dependency.

So, I got bored and built my own: black-hat-exe CORP. UI Studio.

It is a high-performance, single-page application built entirely from scratch to generate production-ready CSS3. Here is a look under the hood at how I engineered it.

🛠️ The Tech Stack (Zero Dependencies)
As a frontend developer, I am a massive advocate for keeping the DOM light. I bypassed Tailwind and Bootstrap for the core architecture and wrote this entirely in:

Vanilla JavaScript: For the real-time DOM manipulation and shadow math.

Semantic HTML5 & Custom CSS3: Utilizing strict CSS Grid and Flexbox layouts.

GitHub Pages: Hosted live and indexed directly via Google Search Console.

🎛️ 10 Granular UX Controls
The core engine reads 10 inputs in real-time. Instead of just giving you a generic "blur" slider, I mapped out controls for:

Dual-Shadow Distances (Critical for authentic Neumorphism)

Shadow Intensity & Spread

Backdrop Filter Blurs

Cyber Glow Overlays

Dynamic Border Opacity

🧠 The Neumorphism Shadow Math
The trickiest part of Neumorphism is ensuring the dual shadows (the light highlight and the dark shadow) perfectly contrast with the surface color you select.

Instead of hardcoding colors, I wrote a Vanilla JS function to dynamically parse the hex code, convert it to RGB, and clamp the brightness up and down based on your intensity slider.

JavaScript
// Lighten or darken RGB color for Neumorphic dual shadows
function adjustBrightness(rgb, factor) {
var r = clampChannel(rgb.r + factor);
var g = clampChannel(rgb.g + factor);
var b = clampChannel(rgb.b + factor);
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

// In the engine, it dynamically splits the shadows:
var darkShadow = adjustBrightness(rgb, -contrastShift);
var lightShadow = adjustBrightness(rgb, contrastShift);
This guarantees that whether your card is #151e2e (Dark Mode) or #ffffff (Light Mode), the CSS output is mathematically perfect.

📱 Bulletproof Viewport Scaling
One of the biggest issues with multi-panel tools is horizontal blowout on mobile devices. I engineered a strict @media query utilizing minmax(0, 1fr) on the CSS Grid. If you load the studio on a phone, the fixed header smoothly auto-hides on scroll, and the dual-panel layout seamlessly stacks into a single column without breaking the viewport bounds.

⚡ Try it Live
You can play with the real-time engine and export the CSS code here:
👉 Live UI Studio v2.5

black-hat-exe CORP. — UI Studio (Glassmorphism & Neumorphism CSS Generator)

Free Glassmorphism, Neumorphism, and Cyber UI CSS Generator. Export hand-crafted, production-ready CSS3.

black-hat-exe.github.io

If you are a developer, try playing with the shadow spread sliders or testing the viewport scaling—let me know if you can break the UI anywhere! 🐛

(P.S. If you like the dark cyber-aesthetic but hate coding layouts from scratch, I also take custom frontend architecture commissions over on my Fiverr profile.)

Let me know what you think of the dual-shadow logic in the comments!

DEV Community: Black Hat

I Built a Zero-Dependency Glassmorphism & Neumorphism CSS Generator (Vanilla JS) 🚀

black-hat-exe CORP. — UI Studio (Glassmorphism & Neumorphism CSS Generator)