Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:

enter image description here


2 Answers 2


The bottom part is gaussian blurred and has a semitransparent white overlay.

Step1: Select the overlay area on the background (the original image) and apply a gaussian blur of radius 12px.

Step2: Create a new layer, select the same part for the overlay, fill it with white, and give this layer an opacity of 66%

Reproduced with the upper part of your reference image:
EDIT : new parameters to match the original

enter image description here

  • I'd assume this is done with code, if this is a screenshot. I guess it comes down to whether or not he/she's asking to do this in a composition or mockup, or implement it online.
    – Eric
    Aug 27, 2013 at 16:41
  • @Peter Walser how to create the overlay area that will be applied the Gaussian if there are more layers? Need first to merge them? Oct 11, 2013 at 2:49
  • 1
    @FredCollins: yes, either you merge them first and blur the selection, or you create a new layer with a copy of the merged selection (which would need to be recreated every time a layer is changed). Oct 11, 2013 at 9:01
  • @PeterWalser thanks. Last question. To create the new transparent layer with opacity of 66% I use the rectangle tool but I feel there's a better way. Like creating a mask/clipping mask for the blurred layer or something alike. What do you suggest? Oct 11, 2013 at 15:54
  • With a separate layer, you can quickly adjust the overall opacity. The opacity mask solution has the same result, here you can even adjust the opacity per pixel. And, you can of course combine both approaches (mask+layer transparency). Whichever works best for you. Oct 11, 2013 at 18:06

You did not define what program or technology you are using. So, while Peter described a nice way to do it with Photoshop, I would like to add that this effect can also be created using CSS3.

Here's a peak into the CSS needed:

    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);

    opacity: 0.6;

Not saying that this is how you should do it… in fact, I personally would use Peter's procedure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.