-1

I'm looking for a way to replicate this effect in HTML/CSS. I thought it'd be as simple as setting a radial gradient as the background, then putting a transparent darker overlay and just making the buttons and such white but transparent, yet it doesn't give nearly the same effect.

This is the effect I'm trying to replicate:

enter image description here

Anyone who's smart with CSS happen to know how to achieve this? I've looked all over and haven't found any methods that aren't insanely convoluted workarounds that barely work for one browser. Multi-browser capability is optional, I mainly care about chrome and firefox.

Thanks in advance!

EDIT: To make things even tricker, yes this is a radial gradient, I posted kind of a bad picture. Here's a better example:

enter image description here

Izzy
  • 272
  • 1
  • 14
  • 1
    Where is the effect in question, present? Any links you can provide? Also, can you provide more details about the *"effect"* you are after? Is it the the round buttons, the cool text, the border radius, the colors?? – justinw Oct 31 '15 at 23:13
  • It's the effect where the buttons are basically subtracting from the darker background to reveal the actual gradient as the background. I'm not sure how to really explain it but maybe you can see it better on the buttons that arent highlighted, the color of the text on the darkened buttons have a gradient because they are the color of the original bg gradient. I'm not sure if I explained that well enough, but hopefully I did – Izzy Oct 31 '15 at 23:14
  • Any links? or is it a local app? – justinw Oct 31 '15 at 23:15
  • @Quoid Sadly no, just this image. I'm looking to recreate it as close as possible. – Izzy Oct 31 '15 at 23:16
  • Ahh, dang, can't tell too well from the image, but maybe a smarter mind will chime in - good luck – justinw Oct 31 '15 at 23:17
  • 2
    Looks like a lineary gradient rather than a radial gradient. – GolezTrol Oct 31 '15 at 23:31
  • @GolezTrol Here's a better picture, looks linear but it's definitely radial that is offset to the left http://i.imgur.com/ni683iC.png Also edited/updated the OP – Izzy Oct 31 '15 at 23:37

1 Answers1

3

The text/images are having a blend mode of overlay. Regardless of the background gradient orientation, the text and buttons "adapt" to it.

mix-blend-mode: overlay;

I've recreated a quick demo with just the list element. Hope you find it useful.

Demo

http://codepen.io/aarjithn/pen/WQyLNz?editors=010

aarjithn
  • 1,151
  • 8
  • 20
  • This helped! I actually found the exact technique I was looking for, which required a bit of tweaking, but this is what I did differently: All I needed was the blend mode hint, then I went through all blend modes and found one that matched what I was looking for which happens to be 'color-dodge' and instead of using #fff to indicate a button being highlighted, I used #aaa, and this is the effect it gave: http://codepen.io/Flipybitz/pen/vNrPZB – Izzy Nov 01 '15 at 11:32