how to get window with semi-transparent blurred background

Question

I'd like to get a window that has a semi-transparent blurred background, just like what the Terminal can do. See this video, about 30 sec in, to see what I mean: http://www.youtube.com/watch?v=zo8KPRY6-Mk

See an image here: http://osxdaily.com/wp-content/uploads/2011/04/mac-os-x-lion-terminal.jpg

I've been googling for an hour, and can't get anything to work. I believe I need to somehow create a core animation layer and add a background filter, but I've been unsuccessful so far... I just see the gray background of my window. Here's the code I've got so far:

Code:

//  Get the content view -- everything but the titlebar.
NSView *theView = [[self window] contentView];
[theView setAlphaValue:0.5];

// Create core animation layer, with filter
CALayer *backgroundLayer = [CALayer layer];
[theView setWantsLayer:YES];
[theView setLayer:backgroundLayer]; 
CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
[blurFilter setDefaults];
[theView layer].backgroundFilters = [NSArray arrayWithObject:blurFilter];  
[[theView layer] setBackgroundFilters:[NSArray arrayWithObject:blurFilter]];

Any tips or examples to do what I'm trying to do? Thanks!

You are looking for something called HUD window! Try searching on google it will help you — TeaCupApp, Jun 24 '12 at 04:29
thanks, but i'm still not getting much. found several promising forum posts, but pointed to examples or blog posts that no longer exist. — Scott C, Jun 25 '12 at 04:25
Frankly, I doubt the blurring is easily possible w/o private APIs. E.g. http://stackoverflow.com/questions/5901135/blur-background-behind-maattachedwindow — Vervious, Jun 25 '12 at 05:38
There is now a working solution in recent versions of OSX/Xcode : https://stackoverflow.com/questions/41475551/how-can-i-use-nsvisualeffectview-to-blend-window-with-background — Béatrice Cassistat, Sep 01 '17 at 21:46

score 2 · Answer 1 · answered Jan 11 '13 at 22:09

2

no need for layers and filters, NSWindow can do it itself

[mywindow setOpaque:NO];
[mywindow setBackgroundColor: [NSColor colorWithCalibratedHue:0.0 saturation:0.0 brightness:0.2 alpha:0.5]];

please do not use this, as it will alpha your title bar also (post it here just in case others need)

[mywindow setOpaque:NO];
[mywindow setBackgroundColor: [NSColor blackColor]];
[mywindow setAlphaValue:0.5];

enter image description here

answered Jan 11 '13 at 22:09

Jiulong Zhao

1,313
1
15
25

That's weird, the first method doesn't work for me (doing it in the init). Also tried in awakeFromNib, where else should I do this (I'm in an nswindow subclass) – Feb 28 '13 at 09:37
no, the only thing you may control is the transparency (colorful). – Jiulong Zhao Jun 28 '13 at 22:23
So, macOS Terminal will allow us to set the blur's strength. You're saying we can't do that unless we delve into the private frameworks realm? How does Terminal achieve that effect? – AndreG Aug 25 '17 at 14:54

Matthieu Riegler · Answer 2 · 2013-01-23T08:36:47.957

2

For the transparency use Jiulong Zhao's suggestion.

For a blurred background use this

The call on a NSWindow :

[self enableBlurForWindow:self];

The function :

-(void)enableBlurForWindow:(NSWindow *)window
{
    //!!!! Uses private API - copied from http://blog.steventroughtonsmith.com/2008/03/using-core-image-filters-onunder.html

    CGSConnection thisConnection;
    uint32_t compositingFilter;
    int compositingType = 1; // Under the window

    /* Make a new connection to CoreGraphics */
    CGSNewConnection(NULL, &thisConnection);

    /* Create a CoreImage filter and set it up */
    CGSNewCIFilterByName(thisConnection, (CFStringRef)@"CIGaussianBlur", &compositingFilter);
    NSDictionary *options = [NSDictionary dictionaryWithObject:[NSNumber numberWithFloat:2.0] forKey:@"inputRadius"];
    CGSSetCIFilterValuesFromDictionary(thisConnection, compositingFilter, (__bridge CFDictionaryRef)options);

    /* Now apply the filter to the window */
    CGSAddWindowFilter(thisConnection, [window windowNumber], compositingFilter, compositingType);
}

NB: It uses a private API

edited Jan 23 '13 at 08:36

answered Jan 23 '13 at 08:29

Matthieu Riegler

31,918
20
95
134

13

How is it app store safe when it uses private APIs? – strange Sep 01 '13 at 14:46
http://cocoasnippets.io/cocoa/ui/nswindow/coregraphics/2014/02/27/translucent-nswindow-with-blurred-background.html this link still works – Jesus Aug 01 '14 at 17:24
some solution without using private api? – Wojtek Dec 19 '14 at 20:16
Dont use this solution. My App rejected due to use of this API. – Mrug Oct 21 '15 at 10:30

score 0 · Answer 3 · answered Sep 03 '17 at 06:19

For those reading this in 2017 and using Swift 4 and wanting to change your BG Alpha you can add the following to your custom NSWindow class:

self.backgroundColor = NSColor.black
self.backgroundColor = NSColor.init(calibratedHue: 0, saturation: 0, brightness: 0, alpha: 0.2)

p.s. I do not need the blur effect yet and when I do, I'll update the answer

how to get window with semi-transparent blurred background

3 Answers3

Linked