Faster Blur? || Glassmorphism UI

+1 for Mario’s “stack blur” algo becoming the default in JUCE. In addition to gin, a lot of frameworks on a lot of platforms implement this tried and true algo.

It looks like the JUCE DropShadow is currently buggy and lacking:

  1. Radius values don’t line up with what browsers/figma produces, rendering it useless for implementing designs
  2. It produces strange “streaking” artifacts on paths
  3. It doesn’t support “spread”
  4. There’s no inner shadow counterpart

These things were trivial to implement on top of Gin’s implementation of Mario’s algorithm.

Here’s a 200x200px box with 50px rounded edges and 50px blur radius shadow rendered in chrome, figma, and JUCE:

To reproduce the (IMO) buggy JUCE shadow:

    Path path;
    path.addRoundedRectangle(50, 50, 200, 200, 50);

    DropShadow(JUCE_LIVE_CONSTANT(Colours::black),
               jmax(1, JUCE_LIVE_CONSTANT(1)),
               {JUCE_LIVE_CONSTANT(0),
               JUCE_LIVE_CONSTANT(0)}).drawForPath(g, path);

    g.setColour(Colour::fromString("FFC4C4C4"));
    g.fillPath(path);
7 Likes