A realistic 3D sphere with radial gradient shading and floating animation. Perfect for logos, loading indicators, or decorative elements.
<div class="sphere"></div>.sphere {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #4ecdc4, #1a535c);
box-shadow:
inset -25px -25px 40px rgba(0, 0, 0, 0.5),
0 20px 40px rgba(78, 205, 196, 0.3);
animation: sphereFloat 3s ease-in-out infinite;
}
@keyframes sphereFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}