CSS Animation Examples | 3D Pyramid Gradient CSS Loader

Last Updated: 2025-09-02 14:13:45

If you are looking for unique CSS loader examples that stand out from the usual spinning circles or bouncing dots, this 3D Pyramid Gradient CSS Loader is a fantastic choice. This loader combines 3D CSS transforms, conic gradients, and smooth spinning animation to create a colorful pyramid effect. Unlike typical loaders, this one feels modern, geometric, and vibrant—perfect for creative projects, portfolios, or stylish websites.

With this loader, you get a visually stunning CSS animation example with source code, which makes it easier for beginners and developers to learn and customize. It is lightweight, works directly in modern browsers (optimized for Chrome), and requires no external libraries.

You can download the complete source code.

Source Code Explanation

Here’s a detailed breakdown of the main parts of this CSS loader:

We start by styling the to center the loader both vertically and horizontally using flexbox. A gradient background is applied that matches the pyramid’s colors for a smooth theme.

◈ Loader Container (.pyramid-loader)
This is the outer box that defines the size of the pyramid loader (300px × 300px). It also sets up 3D space using transform-style: preserve-3d.

◈ Spin Animation (@keyframes spin)
The loader rotates infinitely using rotateY(360deg). This is what gives the pyramid its continuous spinning animation.

◈ Wrapper
The .wrapper holds all sides of the pyramid. It applies the spin animation to make sure the entire pyramid rotates smoothly.

◈ Pyramid Side Base (.side)
All four pyramid faces share a common base style. We use clip-path: polygon to cut the shape into a perfect triangle, and transform-origin ensures correct rotation alignment.

◈ Side 1 (.side1)
The first face of the pyramid is rotated with rotateZ(-30deg) rotateY(90deg) and styled with a conic gradient for a colorful look.

◈ Side 2 (.side2)
This side is similar but uses rotateZ(30deg) rotateY(90deg). Together, sides 1 and 2 form the opposite walls of the pyramid.

◈ Side 3 (.side3)
This side is rotated on the X-axis (rotateX(30deg)). It forms one of the triangular walls and has its own conic gradient.

◈ Side 4 (.side4)
The final face rotates with rotateX(-30deg). Along with the other three sides, it completes the pyramid structure.

◈ Shadow (.shadow)
A blurred square rotated on the X-axis creates a soft shadow effect under the pyramid, making it appear more 3D and grounded.

/* Body setup and background */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #2BDEAC, #2F2585, #F028FD, #D8CCE6);
  margin: 0;
  overflow: hidden;
}

/* Loader container */
.pyramid-loader {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}

/* Spin animation */
@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

/* Wrapper that holds pyramid sides */
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 4s linear infinite;
}

/* Base style for each pyramid side */
.pyramid-loader .wrapper .side {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Side 1 */
.pyramid-loader .wrapper .side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient(#2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

/* Side 2 */
.pyramid-loader .wrapper .side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient(#2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

/* Side 3 */
.pyramid-loader .wrapper .side3 {
  transform: rotateX(30deg);
  background: conic-gradient(#2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

/* Side 4 */
.pyramid-loader .wrapper .side4 {
  transform: rotateX(-30deg);
  background: conic-gradient(#2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

/* Shadow effect */
.pyramid-loader .wrapper .shadow {
  width: 60px;
  height: 60px;
  background: #8B5AD5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
}

You can download the complete source code.

 

This 3D Pyramid Gradient CSS Loader is a perfect example of how CSS loading animations can be creative and functional at the same time. With just a few lines of CSS, you can build a visually impressive loader that grabs attention while a page or app loads. It’s lightweight, fully customizable, and a great addition to your collection of CSS animation examples with source code.