How to create a sphere using pure css.

Css spheres may sound impossible (or at least very tedious) considering that we need to position hundreds of divs and everything but that is not actually the truth. In fact, we can make a realistic CSS sphere using only one div and minimal CSS! In fact, we don’t even need to make a real sphere, we can just make a div that looks like a sphere using a radial gradient.

1. Create the div

We will start slow. We will just add a simple div and give it a class “sphere”.

2. Add a bit of CSS


How to use CSS to its full potential

1. calc()

Calc is one of the CSS tools which not everyone knows about. It allows you to add calculations in your CSS code. This can be used to make your website more responsive and also remove some annoying overflows: example.

2. cubic-bezier()

This is another useful way to make your css animations come to life. Most of the time, we use linear, ease, ease-in-out, and other pre-defined beziers wasting half of the day finding the perfect bezier. The cubic-bezier() function allows us to create a custom bezier. At first, the numbers…

The Anonynmous Koder

I am the anonymous koder.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store