8

How to add blurry glass effect into the themes? (CSS3 supports gaussian blur with blur(1px); on many browsers)

When I drop the opacity, I'm getting a result like this:

Terminal Background & Panel without blur effect

But I want a blur effect like this:

Finder Panel with blur effect

In Addition for understanding the blur effect:

enter image description here

Thanks!

eminfedar
  • 245

2 Answers2

0

I know this is pretty old--but I felt I should at least answer with a quick word.

As far as wanting a subset of CSS to be able to use 'background-filter':

What browsers can do and what the Operating System can do are completely different things. Some OSes support native blur features, some don't. The CSS offered in non-web, like the pango and gtk stuff, is usually going to be a subset of CSS. This changes a lot so this might already not be the case anymore.

Basically, if you want blurred backgrounds you are going to need a compositor to do it, but it will probably take some setting up to do it. I think Compton has that ability, but as I said it takes some doing and isn't something you can just stuff into a theme.

You might also check out Compiz/Fusion (they are one now), it is pretty cool and IIRC you can do some fancy things there with blur and even more. Plus it is/was faster and smaller than KWin last time I tried it so there's that. If you must have absolute efficiency you should probably stick with Compton, though.

If you are just looking to blur terminal

There are a whole bunch of hacky tools out there today that will accomplish this. The newer managers have this built-in now so it's no sweat. Windows users may have to wait longer. Mac and Linux users already have this now.

osirisgothra
  • 374
0

I was also wondering this recently, and from what I understand I don't believe that gtkcss supports filters at the minute.

The method I came around was to add a shader effect to a clutter (mutter) actor through a glsl shader.

I managed to get it working to a good blur effect, the example I was working off was a GNOME extension called blyr.

My glsl file and code for my project can be found here, for reference.

And you can call the glsl in code and apply it to the actor with something like

    var shaderEffectVer = new Clutter.ShaderEffect(Clutter.ShaderType.FRAGMENT_SHADER);
    var wallpaper_actor = new GtkClutter.Actor ();

    shaderEffectVer.set_shader_source("shader.glsl"));
    shaderEffectVer.set_uniform_value("dir", 1.0);
    shaderEffectVer.set_uniform_value("width", g_width);
    shaderEffectVer.set_uniform_value("height", g_height);
    shaderEffectVer.set_uniform_value("radius", 10.0);
    shaderEffectVer.set_uniform_value("brightness", 0.98);
    wallpaper_actor.add_effect_with_name("blur",shaderEffectVer);

Hope that helps you

nick_wilkins
  • 1