I have a black 70% opacity play button that sites on top of videos.

On light backgrounds it is very clear but obviously on darker backgrounds it nearly vanishes. I would like it to be visible on dark backgrounds as well.

I'd like to maintain the transparency feel. I do not want to use an outline because it wold be the only outlined item on the site.

enter image description here

Edit: I ended up doing a combination of the suggestions. I added a white glow and I added a semi transparent white circle behind the black one which filled in the triangle and had the same effect as adding the grey. Thanks fo ryour help with this.

enter image description here


If you have to keep the transparency, then at least make the icon itself solid, this will have enough contrast to work against the dark background - even if you can't see the outer transparent background.


I would try it with some grey. So instead of 70% opacity with a black button, Try with some dark grey with a little less transparency.

You have to look for ways to get some white into it. Very transparent textures, gradients or very slight white noise might help also.


if you are creating a website why not use CSS to transition the effect between dark and light backgrounds?

Code the circle with something like:

.circle {
border-radius: 50%;
width: 200px;
height: 200px; 

Add a triangle with something like:

.arrow {
width: 0; 
height: 0; 
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;

if i recall use the ~ selector to generate a transition when you have a dark background

That's if you are doing this for a website but I know you didn't specify that. Hope this helps.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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