Technique for 3D sphere and shadow with CSS

In website design, when we want to make a webpage more attractive flat design alone is not always enough. Sometimes we need to create a visual effect that is immediately caught by the users eyes. One such interesting effect is the 3D sphere with soft shadows underneath.

Imagine you land on a webpage and there is a glowing ball floating in the middle with a soft shadow falling to the ground. Immediately it will seem like it is not inside the screen, but a real object. This visual illusion is what we can actually create using CSS.

The amazing thing is that you do not need any complicated graphics software, image files or JavaScript animations. Just use some CSS techniques like radial gradient, blur and transform to add a 3D effect to your webpage that will look great.

Just like that the shadow fools our eyes. An oval shaped soft shadow under the sphere appears to be placed on the ground. Shadows become more natural and realistic when edges are blurred using blur.

In reality, this created by CSS sphere is just a basic div element. However, it looks to be a real sphere when we apply the appropriate color layer to reflect light and the depth of the shadow below. It appears as though light is falling from above when a light color is used at the top and the sphere appears round when the bottom gradually changes to a darker color.

In this tutorial we will see step by step how to create such an effect very easily. First we will learn the basic concepts of how light, color layers and shadows work. Then we will see how to draw spheres using CSS gradients and how to soften and naturalize the shadows below using transform and blur. At the end we will take some additional ideas like changing the color of the sphere, making it smaller or using more than one sphere together.

There is much more in this process than just making a sphere. The same method can be used to add the buttons, icons and even the reality to the entire background. Small details like them can often have a significant impact on web design because they give the idea that the design is made of thought.

This process is not limited to just creating a sphere. The same method can be used to add realistic feel to buttons, icons and the entire background. Small details like these can frequently have an important effect on web design because they create the impression that the design has been carefully created.

In the next part we will see a real example of this using CSS directly and understand how to create a perfect 3D sphere and its shadow step by step.

HTML:

let us start by creating two HTML div Elements first. the first element class name is 'sphere'. Another class will be 'shadow'.

<div class="sphere"></div>
<div class="shadow"></div>

CSS:

Centering the Sphere:

By 0 of margin and padding, all the defaults around the webpage are removed. Using MIN-HIGHT, the entire page is always kept at least at the same height as the screen so that it does not look blank on any device, small or larger. The background is then given a medium gray color that is neutral and suitable for the original design.

Flexbox method is used to properly decorate the inner ingredients. Align Items and Justify Content work together and place the material in the middle of both vertical and horizontal sides. Finally the overflow has been determined.

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #aaaaaa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

Styling the Sphere:

First, the material is determined using the position property in such a way that it can be easily arranged inside or out of it. Then the specified width and height are given so that it creates a square of equal width and height.

This square has been used for square size and is set at 50 percent, causing the square into a perfect circle. Since it is the main visible ingredient, it has been brought forward using Z-Index.

The most attractive part is the background. Here is a radial-gradient used where the shadow of light is added step by step. The light color at the top of the upper is slowly darker as it goes down. As a result, it seems that the light is falling from the top and the inner depth of the sphere is being created. The layers of these colors give the feeling of a glossy ball at the same time.

.sphere {
  position: relative;
  width: 220px;
  height: 220px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 14%, 
    #f0f0f0 0%, 
    #f0f0f0 15%, 
    #d8d8d8 30%, 
    #b0b0b0 45%, 
    #808080 60%, 
    #555555 75%, 
    #2a2a2a 90%);
}

Styling the Shadow:

This '.shadow' style creates a realistic shade under the sphere. Here every property works together to bring the feeling of floating ball in the eye.

First, the shadow has been placed using the Position, Absolute in such a way that it is directly related to the position of the original sphere. It has been given wide and low shape with certain Width and height because the shadow is not always the perfect circle like the sphere, it looks like oval. Calc (50% + 48px) of TOP is determined just below the sphere, so it gives a real feeling like the weight of the sphere.

Then the most important part comes background. Here is a radial-gradient used that from the very dark black to the center to slowly disappear from the fade to fade. This creates dense shade in the middle and soft mixed edges on the outside, which looks like a natural shade.

Border radius propertie give the shade smooth round edge. Later, it was lightly used using the transform and pressed on the length so that it was pressed like a real shade. Finally, the Blur of Filter softens the edges of the shade, so it is no longer mixed with the soil and mixed with the soil.

.shadow {
  position: absolute;
  width: 267px;
  height: 120px;
  top: calc(50% + 48px);
  background: radial-gradient(ellipse, rgb(0 0 0) 0%, 
    rgb(0 0 0 / 45%) 30%, 
    rgb(0 0 0 / 13%) 
    50%, rgb(0 0 0 / 2%) 70% 70%, 
    #00000000 85%);
  border-radius: 50%;
  transform: skewX(-5deg) scaleY(0.6);
  filter: blur(10px);
}

Are you interested in CSS art? We have drawn pictures of the cat, fox etc. using only CSS properties. These tutorials will entertain you.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also, to stay updated with the latest tutorial, subscribe to me on Youtube.