Search code examples
csstransparencyopacityphotoshop

Can't convert Photoshop opacity to CSS3

My PSD contains something like this:

enter image description here

As you can see this is a simple background with a text block (color: #ffffff). I've applied a 3% opacity on the text layer like this:

enter image description here

When I try to reproduce this in CSS, the text color is far more darker in the browser and I don't understand why:

enter image description here

Here is the CSS

.a-text {
  color:       rgba(255, 255, 255, 0.03);
  font-size:   200px;
  font-family: "Lato Black";
}

This is not a color profile issue or something. As you can see the background color is exactly the same. And this is not a CSS rule conflict. There is something wrong with the transparency that I've maybe misunderstood.

Thanks for your help :)

Solution

  • Your code looks correct and I don't think you've misunderstood anything. Its going to be hard to reproduce fonts and effects/styles placed on the fonts completely perfectly when moving from a graphics tool to code. What you have is a bit close you may just want to bump up the opacity a bit. If you need your graphics to be perfect regarding opacity shades etc I recommend using SVG.