The Orb Tutorial aka Tutorbial

In my recent shrine I used pure css to make my buttons look like bubbles/orbs. This is a tutorial of how I achieved the effect incase someone wants something similar for their own site. It took me far too long to figure out how to get this how I have it so hopefully this helps at least one like minded web-designer and/or myself of the future. NOTE: This is just how I did it. I am by no means a CSS expert. OK? Yay!

Pre-game: Decide what color(s) you want your orb to be. You will only need one color to base your entire orb on. For this tutorial I am using #a2b1f8

---

1. The Base

In your html add the following code to your html body:

<div id="Orb-Wrapper"> <div id="Orb"></div> </div>

Everything else will be done in your css.

To begin we define #Orb-Wrapper's size and background color. This is our container for the orb. This is important in this example because the orb is semi-transparent. If your container/body's {background-color} is lighter than your orb color or your background gradient doesn't fade to transparent (#ffffff00), you can skip this entirely.

#Orb-Wrapper{ width: fit-content; background-color: #bedefc; padding:10px; border-radius: 10%; }

We then define the orb itself "#Orb". This can be anything you want but for this tutorial I am using 150px ratio and 50% border-radius for a perfect circle. Feel free to play around with the shape here!! The most important part is the background linear gradient, which sets the color and transparency of our orb.

#Orb{ position: relative; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to bottom, #a2b1f8, #ffffff00); border:#a2b1f8 2px solid; }

2. Pseudo Elements

::before and ::after pseudo elements in css insert content before and after an element. In the case of #Orb we want to add a shine at the top (::before) and a shine from the bottom (::after).

First I will make a circle slightly smaller than my base, position it at the top, and give it a white to transparent gradient.

#Orb::before { content: ""; position: absolute; width: 75%; height: 50%; top: 3%; left: 13%; border-radius: 50%; background: linear-gradient(to bottom, #ffffff, #ffffff00); opacity: 0.5; filter:blur(1px); }

Then I will do the same with the ::after element but positioning it at the bottom and reversing the direction of the gradient.

#Orb::after { content: ""; position: absolute; width: 75%; height: 40%; top: 59%; left: 12%; background: linear-gradient(to top, #ffffff, #ffffff00); border-radius: 56%; opacity:0.5; filter:blur(2px); }

Finito!

Your finished css should look like this:

#Orb-Wrapper{ width: fit-content; background-color: #bedefc; padding:10px; border-radius: 10%; } #Orb{ position: relative; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to bottom, #a2b1f8, #ffffff00); border:#a2b1f8 2px solid; } #Orb::before { content: ""; position: absolute; width: 75%; height: 50%; top: 3%; left: 13%; border-radius: 50%; background: linear-gradient(to bottom, #ffffff, #ffffff00); opacity: 0.5; filter:blur(1px); } #Orb::after { content: ""; position: absolute; width: 75%; height: 40%; top: 59%; left: 12%; background: linear-gradient(to top, #ffffff, #ffffff00); border-radius: 56%; opacity:0.5; filter:blur(2px); }