I am a programmer and not an artist so I apologize in advance if the question I am asking sounds trivial.

But does anyone know what these things (floating interconnected ball effect) is called? I see them almost everywhere in the web development world.

How is the affect of these semi-translucent shaded balls achieved, and does anyone have any recommendations on where to obtain or create these assets for myself?

enter image description here

  • 1
    Not everything has a fancy name. Bubbles, balls, circles... Besides that, your question is too broad, there are different ways of producing those bubbles. – Luciano Mar 1 '18 at 9:30
  • @Luciano Let me rephrase my question. Pretend you are talking to an idiot. What is the easiest way to create these balls. Is it some layered PNG file or something? – AlanSTACK Mar 1 '18 at 10:20
  • really this is not the place to request for tutorials. It's clear that you're not an idiot; why don't you just create it using one of the ways you already figured out? – Luciano Mar 1 '18 at 11:15
  • 1
    @Luciano this question is not broad. At the rest of folks closing this question, how is this broad? Please start a meta post if you need it. This is about as precise as someone wanting to know about this stuff, absent terminology, could possibly get, and is a VERY SPECIFIC question, with several good answers. None of which require tutorials. It's a grey circle with partial opacity and a blend mode suited to the colour of the circle and the background. You ALL know this if you've ever used any graphic design apps. The guy asking the question doesn't know this == narrow question, exact answer – Confused Mar 2 '18 at 13:32
  • 1
    @AlanSTACK I apologise for the manner in which this question has been treated by others. They have fallen victim to a "get off my lawn" mood with regards "how to..." and "what is..." questions that makes no sense to me. This is a question and answer site, apparently, and image manipulation and illustration questions are the norm. In programming terms, what you're asking about is most often done with particles, wherein additive blend is the normal mode of blending. It's because of how good this looks (and how simple and efficient it is) that it's making its way to websites. – Confused Mar 2 '18 at 13:59

These are circles (filled, probably with 50% grey) with a very low opacity, and additively blended with the background.

Circles Layers Layer Opacity Additive Blend

The above are the keywords you need for googling how to do this.

Pop the following words in a google image search to get started:

circles as bubbles additive blend

Draw a circle or render it using CSS. Fill it with 50% white/black = grey.

Blend it additively with the background.

In OpenGL parlance, additive blend is glBlendFunc (GL_ONE, GL_ONE).

Set the opacity VERY low. In the below example, it's at 10%:

enter image description here

  • 1
    No worries! If you have any more questions, ping me in the comments by adding my name like I'm adding yours here: @AlanSTACK, so I get notified. I don't often check anything other than SpriteKit and SceneKit stuff on SO, but pinging me I'll get it... and design techniques and paradigms is something I know a lot more about than programming. I might bug you about math questions in the future ;) – Confused Mar 3 '18 at 10:58

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