11 CSS Spheres

css September 16, 2025 by Vladimir 2 min read

Spatial geometry organizes visual data. CSS Spheres remove flat barriers between human and screen, bringing tactile depth to modern UI design. Utilizing this updated collection replaces heavy 3D rendering libraries with pure, native code. Focus remains on functionality, not calculating complex vertex shaders.

These examples rely on precise shading and coordinate manipulation. The code utilizes radial-gradient and inset box-shadow techniques to construct volumetric depth on flat surfaces. Motion states leverage hardware acceleration, animating properties like rotate3d and transform for a locked 60fps frame rate without reflows. The HTML structure remains strictly semantic, maintaining high layout stability and fast rendering logic.

Every free demo is fully responsive and cross-browser compatible. Users can instantly download the raw code or fork an orb on CodePen.

3D Sphere with Dynamic Shadow

3D Sphere with Dynamic Shadow

This demo shows how to create a realistic 3D sphere effect using pure CSS, without SVG or 3D transformations. The effect is achieved through gradients (radial-gradient), shadows (box-shadow), pseudo-elements (::before, ::after) for highlights and shadows, and dynamic variables (@property) for animation.

See the Pen 3D Sphere with Dynamic Shadow.

3D Glowing Bottle

This demo showcases advanced CSS techniques like synchronized transform: rotate() animations and the filter: drop-shadow() property to achieve a visually striking glowing liquid effect within a transparent container.

CSS 3D Sphere Animation

A 3D sphere where an SCSS @for loop calculates the transform for each ring, and the entire animation and structure, built on perspective and transform-style: preserve-3d, are fully configurable via variables.

Pure CSS Wobble-Rotating Sphere

3D sphere from meridians and parallels in CSS. 36 meridians — circles rotated on X-axis in 10° steps. Latitudes — concentric circles shifted on Z-axis. Two rotation axes. Whole structure rotates in 3D.

Spheres but Not Spheres

Spheres but Not Spheres

Glowing spheres created by layering gradients and blend modes. Radial gradient background forms grid of circles, linear gradients at various angles add color. background-blend-mode and mix-blend-mode combine layers for glow effect.

CSS Light Sphere Animation #21

3D sphere from 21 concentric rings. Each ring — div with rotateX(90deg) and Z translation. Sizes and animation delays controlled via CSS variables. Rings pulse, changing color via hue-rotate. Rotation pauses on hover.

CSS Shaded Sphere Using Only Arithmetic

CSS Shaded Sphere Using Only Arithmetic

Interactive disc with “lens” effect. Two masks follow cursor, revealing/concealing striped background. Bottom shadow adjusts height and width based on mouse position. JavaScript clamps movement within circle bounds.

Icosphere of Spheres in Pure CSS

3D icosahedron from points in CSS. Pug generates polyhedron vertices and intermediate sphere points, each represented by .vx element. Points positioned via translate3d with CSS variables --v0, --v1, --v2. Radial gradients create glow effect.

CSS Math Globe Animation

3D globe from horizontal rings. Pug generates rings with varying vertical offset via CSS variable --dp. Ring width calculated via circle formula. flash animation travels through rings with delay, creating running light effect.

Gradient Circle with CSS

Gradient Circle with CSS

3D sphere with simulated highlights and depth via layered gradients. Radial gradients create light spot and depth, linear adds color transition. Pseudo-element forms reflected highlight on surface.

Pétanque: Spheres in CSS

Pétanque: Spheres in CSS

Petanque ball simulation with decorative grooves. Main ball — circle with shadow and border. Nested ellipses create engraved line effect. Small ball — simplified version. Highlight via pseudo-element.