To make a webpage more attractive, just a flat design is not enough. So today we will create a 3D ball with HTML and CSS.
First, we'll learn the basic concepts of how light and shadows work. Then we'll look at how to draw a sphere using CSS gradients and use transform to make the bottom shadow look natural.
Coding starts with imagination:
Imagine you are on a webpage with a bright ball⚪ floating in the middle and a soft shadow falling on the ground.
You may feel like it's not inside the screen but a real object. This kind of visual illusion is possible to create using CSS.
Before you get started, here's a preview of what your 3D ball will look like when finished. Click the run code button to see:
Prerequisites for today's tutorial:
For today's 3D sphere tutorial, you don't need any complicated graphics software, image files, or JavaScript animations.
However, you do need to have a basic understanding of HTML and CSS, especially knowing how to use some CSS techniques like radial-gradient, blur, and transform.
If you don't know radial-gradient, it's okay—I will try to explain everything. So let us start creating a 3D sphere.
How to draw a 3D Ball using HTML and CSS
First, create a <div> element in the HTML with the sphere class name. We will convert this element to a ball using CSS.
<div class="sphere"></div>Now let us move on to CSS. Here the ball is drawn using the .sphere class.
.sphere {
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle at 50% 14%,
#f0f0f0 0%,
#f0f0f0 15%,
#d8d8d8 30%,
#b0b0b0 45%,
#808080 60%,
#555555 75%,
#2a2a2a 90%);
}First of all, we set the size of the sphere in CSS. Here the height and width of the sphere are given as 220 pixels, which will cause the element to take the shape of a box.
Then the border-radius CSS property is set to 50 percent, which makes the .sphere completely round.
🔆Lighting logic
Next let us focus on creating 3D effects. The radial-gradient function is used to give a 3D effect to the sphere element. This creates the illusion of light, making even parallel elements appear 3D (three-dimensional).
Imagine a lamp burning just above the sphere, and the surrounding area is dark. So you will see that the top of the sphere is bright and the bottom is shaded. We tried to achieve the same effect using a radial-gradient.
background: radial-gradient(
circle at 50% 14%,
#f0f0f0 0%,
#f0f0f0 15%,
#d8d8d8 30%,
#b0b0b0 45%,
#808080 60%,
#555555 75%,
#2a2a2a 90%
);
In CSS, radial-gradient are used to draw images with a mixture of multiple colors, spreading outward from the center.
Gradient Shape:
There are two types of radial-gradient shapes in CSS.
- circle: Creates a round gradient.
- ellipse: Creates a oval gradient.
Here we set the Shape of radial-gradient to circle:.
Gradient Position:
The default position of radial-gradient is center, but can be defined as top, bottom, left, right, or using percentages.
We set the center of the gradient to 14% from the top and 50% from the left.
Color Layers:
Here we have divided the color of the radial-gradient into several layers, which progress from light to dark. Here are the details of the color layers.
- 0% to 15% - hex code #f0f0f0
- 15% to 30% - hex code #d8d8d8
- 30% to 45% - hex code #b0b0b0
- 45% to 60% - hex code #808080
- 60% to 75% - hex code #555555
- 75% to 90% - hex code #2a2a2a
How to center the ball on the screen using CSS?
Now let's center the ball. We used the flexbox method to center the ball.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: #aaaaaa;
}First we will change the document body to a flex container, then set the align-items and justify-content to center. These CSS properties will center the 3D ball horizontally and vertically.
These steps are not enough to center. If the height of the body is not determined, the ball will not be centered vertically. So we set the minimum height of the document body to 100vh. This means the body will cover the whole viewport.
Finally, we will set the ball background color to #aaaaaa and the overflow property to hidden.
How to draw a ball shadow using HTML and CSS?
We will create another <div> element to create the shadow of the ball. The class name of the element will be shadow.
<div class="shadow"></div>Then the <div> element is changed to shadow using the CSS property.
.shadow {
position: absolute;
top: calc(50% + 50px);
z-index: -1;
width: 267px;
height: 120px;
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);
}Here's a breakdown of the shadow properties and their purposes:
Shadow position:
The position of the ball shadow depends on the light source. If the light is on the right, the shadow will fall on the left. The effect we added to the ball makes it look like the light is coming from the top. So the shadow will appear below the ball.
position: absolute;
top: calc(50% + 50px);
z-index: -1;
We'll set the shadow position to absolute. This means the shadow is positioned relative to the nearest parent element.
Next, we'll set the shadow top value to calc(50% + 50px), which is a calculated value. This value is determined using the calc() function. If the calc() function weren't used, the shadow position would vary as the page height changes.
To make the shadow appear behind the ball, we will set the z-index to -1.
Shadow shape:
Next we will shape the shadow. The shadow height is set to 120 pixel, and the width is set to 267 pixels.
width: 267px;
height: 120px;
border-radius: 50%;
transform: skewX(-5deg) scaleY(0.6);
Then, the edges of the shadow element are wrapped using a border-radius. The shadow hasn't taken the proper shape yet, so we'll use the transform property.
transform: skewX(-5deg) scaleY(0.6) applies two geometric transformations to the shadow element.
skewX(-5deg):Bends the shadow along the X-axis. This makes the shadow element land to the right.scaleY(0.6):It scales the shadow element along the Y-axis to 60% of its original height.
Shadow color:
Finally, let's add some color to the shadow. We'll use a radial-gradient for the shadow background.
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%);
filter: blur(10px);
The gradient blends different layers of black with different levels of transparency, giving the shadow a smooth effect.
Next, we'll apply the filter: blur(10px) property to make the shadow look more natural.
Final Thoughts and Conclusion
We have covered a lot of 3D effects in this article, so let’s quickly summarize what you have learned.
- How to create a 3D ball using HTML and CSS
- How to create a light effect using radial gradient
- How to create a ball shadow using CSS
Thank you for reading the entire 3D ball article. I hope you have gained some insight into CSS radial-gradient function. For more 3D effects like this, you can follow me on Facebook.
0 Comments