👋 Introduction
CSS has evolved tremendously over the years, giving developers the power to create stunning visuals with just a few lines of code. One of the most exciting aspects of modern CSS is its ability to use custom properties (with the help of @property of course!) and advanced gradients such as conic gradient to craft interactive and dynamic effects.
In this post , I'll walk you through the process of creating a dynamic, orb effect using CSS only. I'll break down each part of the code so you can understand how everything works together to produce this mesmerizing effect.
🚀 Live Demo
Before I dive into the details of the effect, check out this live demo of the orb effect
🧩 Breaking Down the Code
🛠️ Custom Properties (@property)
also known as CSS variables, allow us to define values that can be reused throughout our stylesheets. In my orb effect, I used @property to create animatable properties like --blur, --spread, --color, --angle and others. These properties make it possible to create smooth transitions and dynamic effects that are otherwise difficult to achieve with traditional CSS.
- @property --blur: Controls the blur radius of the orb's shadow.
- @property --spread: Manages the spread radius of the shadow.
- @property --color: Defines the primary color of the orb, which changes throughout the animation.
- @property --lighter-color & --darker-color: Derived from --color, these properties create a gradient effect by mixing the primary color with white and black.
- @property --angle: Sets the starting angle for the conic gradient, adding rotation to the orb's appearance.
🎨 Gradiental Magic
The appearance of the orb is primarily created through the use of CSS gradients. Here's how each gradient contributes to the final effect:
- radial-gradient: Two radial gradients are used to create the core and glow of the orb, giving it depth and dimension.
- conic-gradient: This gradient adds a dynamic, rotating highlight effect that makes the orb appear to have a reflective surface.
- color-mix: This CSS function blends colors to create smooth transitions between light and dark areas on the orb.
These gradients are layered together using background-blend-mode to create a rich, 3D look that changes over time.
🎞️ Animations
Here comes the part where magic happens 🔮!. There are 2 key animations work together to bring the orb to life:
- 🌈 change-color : This animation cycles through a spectrum of colors, giving the orb its dynamic, ever-changing appearance.
- 🌀 orb: This animation alters the blur and spread of the orb's shadow, as well as the angle of the conic gradient, creating a pulsating effect.
On hover ✨, there is a reset animation that brings the orb back to a neutral grayish state , providing a satisfying interaction for users.
💡 Final Thoughts
This orb effect is just the beginning. There are plenty of ways to take it further, such as:
-🖱️ Interactivity: Add mouse or touch-based interactions, such as changing the orb's color based on cursor position or making it follow the user's movements.
-🎮 UI Integration: Use this orb effect as part of a larger UI component, such as a loading spinner, button hover effect, or background animation.
-🔲🔺 Experimenting with Other Shapes: Try applying the same principles to other shapes, like squares, triangles, or even custom SVG paths.
🎉 Conclusion
In this article, we've explored how to create a dynamic CSS orb using custom properties, gradients, and animations. This effect showcases the power of modern CSS, allowing us to build rich, interactive visuals without relying on JavaScript or external libraries.
I encourage you to experiment with this code and make it your own. Whether you're a seasoned developer or just starting out, CSS offers endless possibilities for creativity. Keep pushing the boundaries of what's possible, and happy coding !
Drop a like ❤️, and Follow for more alishata128
Top comments (0)