Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a wave ball effect using CSS?
In this article, we use CSS to create a wave ball effect can offer a unique and visually attractive touch to any website or application. This effect can be used to make buttons, progress indicators, and other user interface elements stand out from the crowd. To get this effect, you will need to be familiar with several fundamental CSS attributes such as border-radius, box-shadow, and animation.
Approaches
To generate a wave ball effect using CSS, there are numerous techniques that can be done. Among the most common approaches are −
Using `box-shadow`
Using `animated gradient`
Let us look at each approach in detail with examples now.
Approach 1: Using `box-shadow`
The first approach to generate a wave ball effect using CSS is by using ‘box-shadow`. The boxshadow property is used to generate the wave effect in this method. To create the illusion of a wave, create many shadows with varied colors and spread values.
Example
Following is an example of creating a wave ball effect using shadow box.
<!DOCTYPE html>
<html>
<head>
<style>
.wave-ball {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
}
50% {
box-shadow: 0 0 10px blue, 0 0 20px transparent, 0 0 30px blue;
}
100% {
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
}
}
</style>
</head>
<body>
<div class="wave-ball"></div>
</body>
</html>
Approach 2: Using `animated gradient`
The second approach to generate a wave ball effect using CSS is by using an ‘animated gradient`. The wave effect is created using an animated gradient in this method. A dynamic wave effect can be created by varying the position and direction of the gradient over time.
Example
Following is an example of creating a wave ball effect using an animated gradient.
<!DOCTYPE html>
<html>
<head>
<style>
.wave-ball {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
}
50% {
box-shadow: 0 0 30px blue, 0 0 20px blue, 0 0 10px blue;
}
100% {
box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue;
}
}
</style>
</head>
<body>
<div class="wave-ball"></div>
</body>
</html>
Conclusion
Creating a wave ball effect using CSS may be performed in a variety of ways, including the use of box-shadow and animated gradient characteristics. To produce the illusion of a wave, the box-shadow method employs numerous box-shadow attributes with varying offsets and hues. The animated gradient method entails creating the wave effect by utilizing a linear gradient for the background and animating the background-position attribute.
166 Views
