DEV Community: Wahab Shah

Modern CSS Features That Made Me Delete Half My JavaScript

Wahab Shah — Tue, 28 Jul 2026 09:18:23 +0000

I used to write a lot of JavaScript for things that, in hindsight, were presentation problems. Sticky headers, smooth scrolling, dark mode toggles, image aspect ratios, carousel snapping — all of it lived in JS files, all of it had edge cases, all of it needed testing.

Over the last couple of years I've quietly deleted most of that code. Not because I found better JavaScript — but because CSS got good enough to handle it natively.

Here's what I replaced and how.

1. Dark mode: from class toggling to one CSS variable

The old way:

const btn = document.getElementById('theme-toggle');
btn.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  localStorage.setItem('theme', 
    document.body.classList.contains('dark') ? 'dark' : 'light'
  );
});

Then a parallel set of CSS rules for every component:

.card { background: white; color: black; }
.dark .card { background: #1a1a1a; color: white; }
/* × 50 components */

The new way:

Define your entire color palette as CSS custom properties on :root, and swap a single attribute:

:root {
  --bg: #ffffff;
  --text: #1a1a2e;
  --surface: #f5f5f8;
  --accent: #6c5ce7;
}

[data-theme="dark"] {
  --bg: #0a0a0f;
  --text: #f0f0ff;
  --surface: #13131a;
  --accent: #7c6fff;
}

/* Every component just uses variables — no duplication */
.card {
  background: var(--surface);
  color: var(--text);
}

The JavaScript becomes a single line:

document.documentElement.dataset.theme = 
  document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';

That's it. One attribute change cascades through the entire design. This is how the theme toggle on CSSTools.io works, and it covers 30+ tools with zero per-component JS.

Try it live: CSSTools.io has a theme toggle in the sidebar — the whole site flips with a single attribute change.

2. Sticky headers: from scroll listeners to one property

The old way:

const header = document.querySelector('header');
const initialOffset = header.offsetTop;

window.addEventListener('scroll', () => {
  if (window.scrollY >= initialOffset) {
    header.classList.add('is-sticky');
  } else {
    header.classList.remove('is-sticky');
  }
});

This runs on every scroll event, causes layout recalculations, and has a classic bug: offsetTop is wrong if the page layout changes after load.

The new way:

header {
  position: sticky;
  top: 0;
  z-index: 100;
}

Three lines. The browser handles it in the compositor thread — no main thread involvement, no layout thrashing, no scroll listener to clean up. It also works correctly even if the page layout changes dynamically.

The one gotcha: position: sticky only works if no ancestor has overflow: hidden or overflow: auto. If sticky isn't sticking, check your ancestor elements.

3. Smooth scrolling: from 40 lines to 1

The classic smooth-scroll-to-anchor implementation was one of the most copy-pasted JavaScript snippets on the internet:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
    const startPosition = window.pageYOffset;
    // ... 30 more lines of easing math
  });
});

The new way:

html {
  scroll-behavior: smooth;
}

Every anchor link on the page now animates smoothly. No event listeners. No easing functions. Works with the browser back/forward buttons too, which the JS version usually got wrong.

Add this to respect users who prefer reduced motion:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

4. Responsive image containers: from padding hacks to aspect-ratio

For years, the way to make a responsive video or image container maintain its aspect ratio was the "padding-top hack":

/* The hack — confusing and fragile */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The new way:

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Works on any element. Works for images, videos, divs, iframes. You can use aspect-ratio: 1 for squares, 4 / 3 for classic photo ratio, 21 / 9 for cinema. No math, no positioning hacks.

5. Carousels: from Swiper.js to scroll-snap

I've replaced three different carousel library implementations with this pattern:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 16px;
  /* Hide scrollbar visually */
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-item {
  flex-shrink: 0;
  width: 80%;
  scroll-snap-align: center;
}

That's a touch-friendly, momentum-scrolling carousel that always snaps cleanly to an item boundary. No library, no event listeners, ~15 lines of CSS.

What it doesn't do: prev/next buttons with JS. For that you still need a few lines of JavaScript — but the core snapping, momentum, and layout is all CSS.

6. Glassmorphism and gradient effects: from custom code to generators

This one isn't a JS → CSS replacement exactly, but it's where I waste the most time: figuring out the right combination of backdrop-filter, background, border, and box-shadow to get a glassmorphism effect that actually looks good. Or dialing in a gradient that doesn't look like the default browser purple-to-blue.

The visual math is genuinely tedious. So I built tools for it:

Glassmorphism Generator — drag sliders for blur, transparency, border opacity, and shadow. Live preview, copy CSS.

Gradient Generator — multi-stop gradients with angle control, live preview, one-click copy.

Box Shadow Generator — layer multiple shadows, control spread/blur/offset/color, see the result in real time.

These exist because I kept writing the same CSS from memory and getting it slightly wrong every time. Giving them a UI saves the trial-and-error step entirely.

The pattern here

Every example above follows the same shape: JavaScript was being used to solve a presentation problem — something that's fundamentally about how something looks or behaves visually. CSS is better at presentation problems than JavaScript is, for three reasons:

Performance. CSS properties like position: sticky and scroll-behavior run on the compositor thread. They don't block JavaScript execution and don't cause layout recalculations.
Resilience. CSS still applies if your JS bundle fails to load, hits a runtime error, or gets blocked. A sticky header that requires a scroll listener breaks silently. A CSS sticky header never will.
Less surface area. Every line of JavaScript is a test to write, a dependency to update, and a potential runtime error. CSS declarations don't throw exceptions.

The rule of thumb I use now: if I'm about to write JavaScript to change how something looks, I check if CSS can do it first. In 2026, CSS usually can.

→ Explore CSSTools.io — free CSS generators for gradients, shadows, glassmorphism, animations, clip-path, and more.

Tags: css, javascript, webdev, frontend, tutorial

How I Built a CSS Glassmorphism Generator (and What I Learned About backdrop-filter)

Wahab Shah — Sat, 20 Jun 2026 09:37:33 +0000

I've been building CSSTools.io — a collection of free CSS generator tools for developers. One of the most fun to build was the Glassmorphism Generator. This post is about the browser quirks I hit, the CSS math behind the effect, and why backdrop-filter is more nuanced than most tutorials let on.

What glassmorphism actually is (under the hood)

Most tutorials show you this and call it done:

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
}

That's the skeleton. But a real glassmorphism effect has five properties working together:

.glass-card {
  background: rgba(255, 255, 255, 0.15);   /* translucency */
  backdrop-filter: blur(16px) saturate(180%); /* the actual glass */
  -webkit-backdrop-filter: blur(16px) saturate(180%); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.20); /* edge highlight */
  border-radius: 20px;                          /* softness */
  color: #ffffff;
}

The part most people miss is saturate(). Without it the blurred background looks washed out and grey. Cranking saturation to 150–200% is what gives glassmorphism that vivid, almost Studio-display quality.

The backdrop-filter problem I didn't expect

When I first built the preview in the tool, I had the glass card sitting directly over a solid dark background. The effect looked completely flat — just a slightly lighter box.

The reason: backdrop-filter needs something colorful behind it to blur. On a solid background there's nothing to blur through, so you just get a tinted box.

The fix was adding colored blob elements behind the card:

<div class="preview-area">
  <div class="blob blob-1"></div>  <!-- purple -->
  <div class="blob blob-2"></div>  <!-- pink -->
  <div class="blob blob-3"></div>  <!-- cyan -->
  <div class="glass-card">...</div>
</div>

.preview-area {
  position: relative;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
}

.blob-1 {
  width: 260px; height: 260px;
  background: #7c6fff;
  top: -60px; left: -60px;
}

Now the backdrop-filter on the card blurs those blobs — and suddenly the effect looks exactly like Apple's macOS design.

The CSS math behind opacity and border

In the generator I expose five sliders:

Blur — maps directly to blur(Npx) in backdrop-filter
Opacity — maps to the alpha in rgba(), but divided by 100: rgba(r, g, b, opacity/100)
Border — maps to the border's alpha: rgba(255, 255, 255, border/100)
Radius — maps directly to border-radius: Npx
Saturation — maps to saturate(N%) in backdrop-filter

The JS that generates the CSS output is straightforward:

function updateGlass() {
  const blur    = parseInt(document.getElementById('glassBlur').value);
  const opacity = parseInt(document.getElementById('glassOpacity').value);
  const border  = parseInt(document.getElementById('glassBorder').value);
  const radius  = parseInt(document.getElementById('glassRadius').value);
  const sat     = parseInt(document.getElementById('glassSat').value);

  const alpha       = opacity / 100;
  const borderAlpha = border / 100;

  // Hex to RGB for rgba()
  const rgb = hexToRgb(glassBgColor);

  card.style.background        = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
  card.style.backdropFilter    = `blur(${blur}px) saturate(${sat}%)`;
  card.style.webkitBackdropFilter = `blur(${blur}px) saturate(${sat}%)`;
  card.style.border            = `1px solid rgba(255, 255, 255, ${borderAlpha})`;
  card.style.borderRadius      = `${radius}px`;

  // Output the CSS
  codeBlock.textContent = `.glass-card {
  background: rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha});
  backdrop-filter: blur(${blur}px) saturate(${sat}%);
  -webkit-backdrop-filter: blur(${blur}px) saturate(${sat}%);
  border: 1px solid rgba(255, 255, 255, ${borderAlpha});
  border-radius: ${radius}px;
  color: ${glassTextColor};
}`;
}

One thing that tripped me up early: I was using element.style.backdropFilter but Safari requires element.style.webkitBackdropFilter as a separate property — not as a fallback inside a string, but as a distinct JS property assignment. Easy to miss when you're setting styles programmatically.

Browser support is better than you think

A common myth is that backdrop-filter has poor browser support. The reality in 2026:

Browser	Support
Chrome	✅ 76+
Safari	✅ 9+ (with -webkit-)
Firefox	✅ 103+
Edge	✅ 79+

The main gotcha is Firefox requires layout.css.backdrop-filter.enabled to be true in about:config for versions before 103. Anyone on a current Firefox is fine.

The other gotcha: backdrop-filter has no effect if the element or any ancestor has overflow: hidden with a non-default z-index in some browsers. I hit this on Safari when I wrapped the card in a container with overflow: hidden — the blur stopped working entirely. The fix was removing overflow: hidden from the parent and using clip-path instead when I needed to constrain the visible area.

Adding shareable URLs

One feature I'm genuinely happy with is stateful URLs. Every time you adjust a slider the URL updates:

csstools.io/glassmorphism?blur=16&opacity=15&border=20&radius=20&sat=180&bg=1a1a2e&text=ffffff

The implementation reads URL params before the first render so the tool loads with exactly the shared state:

(function loadFromURL() {
  const p = new URLSearchParams(window.location.search);
  if (!p.has('blur') && !p.has('opacity')) return;

  if (p.has('blur'))    document.getElementById('glassBlur').value    = p.get('blur');
  if (p.has('opacity')) document.getElementById('glassOpacity').value = p.get('opacity');
  if (p.has('border'))  document.getElementById('glassBorder').value  = p.get('border');
  if (p.has('radius'))  document.getElementById('glassRadius').value  = p.get('radius');
  if (p.has('sat'))     document.getElementById('glassSat').value     = p.get('sat');

  if (p.has('bg')) {
    glassBgColor = '#' + p.get('bg');
    // sync color picker UI...
  }
})();
// Runs BEFORE updateGlass() so the first render uses URL values
updateGlass();

The key detail: loadFromURL must run before the initial render call, not after. If you call it after, the render fires with defaults and then history.replaceState in syncURL overwrites your URL params before loadFromURL reads them. Cost me two hours.

Values that actually look good

After tuning hundreds of combinations in the tool, here are the ranges that work in practice:

Subtle card (dashboard UI):

backdrop-filter: blur(10px) saturate(150%);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);

Strong frosted glass (hero card):

backdrop-filter: blur(20px) saturate(200%);
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);

Dark glass (modal on light background):

backdrop-filter: blur(14px) saturate(160%);
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);

Blur above 25px starts hurting performance on mobile. Opacity above 30% loses the glass look. Saturation below 130% looks grey and lifeless.

Try it yourself

If you want to experiment without writing any CSS, the Glassmorphism Generator on CSSTools.io lets you dial in all five values with live preview and generates the complete cross-browser CSS to copy. You can also share your exact configuration via URL — useful for handing off effects to a teammate.

The full site has 18 other CSS tools — gradients, clip-path, box shadows, animations and more — all free, no signup.

Built with vanilla HTML, CSS and JS — no frameworks, no build step. The whole site loads in under 100ms.

Tags: css webdev javascript frontend tutorial

Cover image suggestion: A dark background with a colorful glassmorphism card showing the CSS code output — the tool itself makes a good screenshot.

Why I Built csstools.io as a Backend Developer

Wahab Shah — Fri, 22 May 2026 17:49:03 +0000

I’ve always been more comfortable writing backend logic than styling interfaces.

Give me APIs, databases, or server-side code and I’m happy.

But CSS?

That usually meant:

tweaking random values for 20 minutes
fighting with gradients
trying to remember animation syntax
adjusting borders and shadows over and over

Over time I realized something:

A lot of developers don’t actually struggle with ideas in CSS — they struggle with the repetitive trial-and-error process.

So instead of searching for snippets every time, I started building small tools to generate CSS visually.

That project eventually became CSSTools.io.

The goal wasn’t to replace learning CSS.

It was to make common UI effects faster and less frustrating.

Some tools currently include:

animation generators
gradient border generators
shadow tools
transform playgrounds
and other small utilities for experimenting with CSS visually

One thing I’ve noticed is that visual experimentation makes CSS much easier to understand.

Instead of reading documentation and guessing values, you can instantly see what changes.

I’m still improving the project regularly, but building it has already changed how I work with frontend styling.

Curious:
What CSS task do you waste the most time on?