Design Community: Prahalad S

Pure CSS Timed Cards Opening

Prahalad S — Tue, 18 Nov 2025 09:55:40 +0000

Pure CSS Timed Cards Opening

The Pure CSS Timed Cards Carousel displays multiple cards that slide horizontally across the screen at fixed intervals.
Each card includes:

Title
Description
Image
Optional button
Auto-expanding animation
Timed text reveal
Reflection + blend modes

Each card uses a CSS variable --timer to control staggered animation timing.

HTML Structure

<!-- responsive coming soon   
 -->
<span class="hamburger">&#9776</span> 

    <section>
        <div class="carousel">
            <ul class="gallery">
                <li class="card" style="--timer: 1; ">
                    <h2>Moments in Motion</h2>
                    <p>Experience the world as it moves — where every frame tells a story of life in motion.</p>
                    <!-- <button>View More</button> --><span></span>

                    <img src="https://img.freepik.com/free-vector/silhouette-twilight-forest-landscape-background_1308-69379.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 2">
                    <h2>Through the Lens</h2>
                    <p>A glimpse into the unseen beauty captured by the eye of imagination.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/flat-design-forest-landscape_23-2149162735.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 3">
                    <h2>Wanderlust Chronicles</h2>
                    <p>Embark on a journey through breathtaking landscapes and untold adventures.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/natural-landscape-wallpaper-video-conferencing_23-2148651571.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 4">
                    <h2>Adventure Awaits</h2>
                    <p>Step into the wild and discover nature’s finest hidden gems.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/natural-landscape-wallpaper-video-conferencing_23-2148651572.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 5">
                    <h2>Footprints Around the World</h2>
                    <p>Every step tells a story — from the dunes to the valleys beyond the horizon.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/flat-design-adventure-background_23-2149059266.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 6">
                    <h2>Dreams in Color</h2>
                    <p>A vibrant collection of landscapes painted by light, nature, and emotion.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/gradient-adventure-background_23-2149048608.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 7">
                    <h2>Canvas of Emotions</h2>
                    <p>Where every hue, shade, and line reflects the pulse of the natural world.</p>
                    <!-- <button>View More</button> -->
                    <span></span>
                    <img src="https://img.freepik.com/free-vector/flat-design-forest-landscape_23-2149162734.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 8">
                    <h2>The Story of Us</h2>
                    <p>A timeless tale of connection — between people, nature, and the places we call home.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/hand-drawn-mountain-landscape_23-2149156633.jpg"
                        alt="">
                </li>

                <li class="card" style="--timer: 9">
                    <h2>Moments of Magic</h2>
                    <p>Capture the beauty of fleeting instants that linger forever in our hearts.</p>
                    <!-- <button>View More</button> --><span></span>
                    <img src="https://img.freepik.com/free-vector/gradient-winter-solstice-illustration_23-2149201708.jpg"
                        alt="">
                </li>
            </ul>
        </div>

    </section>

How the Timing System Works

animation-delay: calc(
  var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
);

Animation Sequence Logic:

✔ Phase 1 — Card enters

Card slides in from right
Title and paragraph are hidden
Image is dimmed

✔ Phase 2 — Card becomes active

Card enlarges (scaleEffect)
Title grows to 50px (scaleText)
Description fades in (paraText)
Button becomes visible (button optional)

✔ Phase 3 — Card exits

Text fades out
Card shrinks
Image fades to 0
Card slides out left
Then the next card begins.

CSS

* {
  margin: 0;
  padding: 0;
}

:root {
  --num: 9;
  /* number of images */
  --wd: 130;
  /* width of card div, in px */
  --gap: 20px;
  /* gap between cards */
  --duration: 27s;
  /* total animation duration */
}

body {
  background-color: #000000;
  font-family: "Poppins", sans-serif;
}

section {
  width: 100%;
  margin: 0 auto;
}

.carousel {
  display: flex;
  align-items: flex-start;
  height: 100vh;
  overflow: hidden;
  /* mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 80%, transparent); */
  justify-content: center;
  width: 100%;
}

.carousel .gallery {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel .gallery .card {
  width: calc(var(--wd) / 1.2 * 1px);
  height: auto;
  position: absolute;
  left: 100%;
  animation: slide var(--duration) linear infinite,
    scaleEffect var(--duration) ease-in-out infinite;
  /* Stagger cards using --timer (should be 1 to 9 for your HTML cards) */
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
}

.carousel .gallery .card h2 {
  position: absolute;
  font-weight: 800;
  z-index: 2;
  top: 100px;
  font-size: 20px;
  transform: translate(0px, 100px);
  color: white;
  left: 0;
  width: 130px;
  text-transform: uppercase;
  animation: scaleText var(--duration) ease-in-out infinite;
  /* Stagger cards using --timer (should be 1 to 9 for your HTML cards) */
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
  transition: transform 0.5s ease;
  mix-blend-mode: overlay;
}

.carousel .gallery .card p {
  opacity: 1;
  z-index: 2;
  position: absolute;
  top: 350px;
  font-weight: 200;
  color: white;
  transform: translate(0px, 200px);
  animation: paraText var(--duration) ease-in-out infinite;
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
  transition: transform 0.5s ease;
  mix-blend-mode: overlay;
}

.carousel .gallery .card img {
  width: 100%;
  border-radius: 5px;
  filter: brightness(0.7);
  transform: translate(130px, 100px);
  border: 1pt dashed #bcbcbc;
  animation: moveImg var(--duration) ease-in-out infinite;
  /* Stagger cards using --timer (should be 1 to 9 for your HTML cards) */
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
  -webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  transition: transform var(--duration) s ease;
}

button {
  background: transparent;
  padding: 15px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  border: 0;
  border-radius: 20px;
  position: absolute;
  top: 270px;
  mix-blend-mode: color-dodge;
  border: 0.05rem dashed white;
  opacity: 0;
  z-index: 2;
  transform: translate(130px, 200px);
  animation: button var(--duration) ease-in-out infinite;
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
  transition: transform 0.5s ease;
}

.carousel .gallery .card h2:before {
  content: "";
  width: 10px;
  height: 5px;
  background: rgb(192, 192, 192);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  transform-origin: left;
  /* important */
  animation: loader var(--duration) ease-in-out infinite;
  animation-delay: calc(
    var(--duration) * ((var(--timer) - 1) / var(--num) - 1)
  );
}

.hamburger {
  color: #ffffff;
  position: fixed;
  right: 2%;
  top: 2%;
  font-size: 30px;
  font-weight: lighter;
}

@keyframes slide {
  0% {
    left: 100%;
  }

  /* scroll 1s, pause 5s per card (≈1.85% scroll, 9.26% pause per cycle) */
  1.85% {
    left: calc(100% - (1 * (100% + var(--wd) * 1px) / var(--num)));
  }

  11.11% {
    left: calc(100% - (1 * (100% + var(--wd) * 1px) / var(--num)));
  }

  12.96% {
    left: calc(100% - (2 * (100% + var(--wd) * 1px) / var(--num)));
  }

  22.22% {
    left: calc(100% - (2 * (100% + var(--wd) * 1px) / var(--num)));
  }

  24.07% {
    left: calc(100% - (3 * (100% + var(--wd) * 1px) / var(--num)));
  }

  33.33% {
    left: calc(100% - (3 * (100% + var(--wd) * 1px) / var(--num)));
  }

  35.18% {
    left: calc(100% - (4 * (100% + var(--wd) * 1px) / var(--num)));
  }

  44.44% {
    left: calc(100% - (4 * (100% + var(--wd) * 1px) / var(--num)));
  }

  46.29% {
    left: calc(100% - (5 * (100% + var(--wd) * 1px) / var(--num)));
  }

  55.55% {
    left: calc(100% - (5 * (100% + var(--wd) * 1px) / var(--num)));
  }

  57.4% {
    left: calc(100% - (6 * (100% + var(--wd) * 1px) / var(--num)));
  }

  66.66% {
    left: calc(100% - (6 * (100% + var(--wd) * 1px) / var(--num)));
  }

  68.51% {
    left: calc(100% - (7 * (100% + var(--wd) * 1px) / var(--num)));
  }

  77.77% {
    left: calc(100% - (7 * (100% + var(--wd) * 1px) / var(--num)));
  }

  79.62% {
    left: calc(100% - (8 * (100% + var(--wd) * 1px) / var(--num)));
  }

  88.88% {
    left: calc(100% - (9 * (100% + var(--wd) * 1px) / var(--num)));
  }

  90.73% {
    left: calc(-1 * var(--wd) * 1px);
    font-size: 40px;
  }

  100% {
    left: calc(-1 * var(--wd) * 1px);
  }
}

@keyframes scaleEffect {
  0%,
  80% {
    width: 130px;
    z-index: 0;
    opacity: 1;
    margin-left: 520px;
  }

  81%,
  100% {
    width: calc(100% + 260px);
    margin-left: -130px;
    z-index: -1;
    opacity: 1;
  }
}

@keyframes scaleText {
  0%,
  80% {
    font-size: 14px;
    transform: translate(0px, 100px);
    width: 130px;
    left: 0;
    top: 120px;
  }

  81%,
  88.88% {
    font-size: 50px;
    width: auto;
    left: 15%;
    top: 370px;
    opacity: 1;
    transform: translate(65px, 100px);
  }

  61%,
  87% {
    transform: translate(0px, 100px);
  }

  88.89%,
  100% {
    opacity: 0;
    transform: translate(0px, 100px);
  }
}

@keyframes paraText {
  0%,
  60% {
    font-size: 1rem;
    transform: translate(0px, 200px);
    width: 130px;
    left: 15%;
    top: 350px;
    opacity: 0;
  }

  61%,
  87% {
    font-size: 2rem;
    width: 30%;
    left: 15%;
    top: 350px;
    opacity: 1;
    transform: translate(0px, 200px);
  }

  88%,
  100% {
    opacity: 0;
    transform: translate(130px, 200px);
  }
}

@keyframes button {
  0%,
  80% {
    transform: translate(0px, 200px);
    left: 15%;
    top: 500px;
    opacity: 0;
  }

  81%,
  88.88% {
    left: 15%;
    top: 500px;
    opacity: 1;
  }

  88.89%,
  100% {
    opacity: 0;
    transform: translate(130px, 200px);
  }
}

@keyframes loader {
  0%,
  70% {
    transform: scaleX(0);
    opacity: 1;
    left: -200%;
    top: 300%;
    background:orange;
  }

  71% {
    transform: scaleX(50);
    opacity: 1;
    left: -200%;
    top: 300%;
      background:orange;
  }

  78%,
  100% {
    transform: scaleX(0);
    opacity: 0;
    left: -200%;
    top: 300%; background:black;
  }
}

@keyframes moveImg {
  0%,
  88% {
    transform: translate(0px, 100px);
    opacity: 1;
    mix-blend-mode: overlay;
    z-index: 0;
  }

  99%,
  100% {
    opacity: 0;
    z-index: -1;
    transform: translate(0px, 100px);
  }
}

Codepen Demo

Pure CSS audio visualizer

Prahalad S — Tue, 04 Nov 2025 09:36:18 +0000

Pure CSS audio visualizer

A visually engaging, interactive audio visualizer built with only HTML and CSS, featuring animated bars triggered by a custom toggle button.

Overview
This component simulates a classic "audio bar" visualizer animation. Users can toggle between "play" and "pause" states with a stylish button. All bar movements and effects are powered by CSS keyframes and gradients—no JavaScript required.

Structure
HTML

Container: .audio-visualizer is the main wrapper.
Toggle: An invisible checkbox (#playToggle) and an associated label (.toggle-btn) allow users to control the play/pause state. The label acts as the visible button.
Visualizer Bars: .bars contains seven .bar elements, each styled with a unique gradient.

<div class="audio-visualizer">
  <input type="checkbox" id="playToggle" hidden>
  <label for="playToggle" class="toggle-btn">▶️ Play / ⏸ Pause</label>
  <div class="bars">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
    <div class="bar bar4"></div>
    <div class="bar bar5"></div>
    <div class="bar bar6"></div>
    <div class="bar bar7"></div>
  </div>
</div>

Toggle Button

Styled Label: Large, pill-shaped button using a linear gradient background.
Interactive Feedback: On hover, the gradient changes for a dynamic effect.
UX: Displays "Play" and "Pause" icons and text for accessibility .

Bars Visualization

Layout: Flexbox arranges bars horizontally, with spacing and vertical bottom alignment.
Gradients: Each bar uses a different vertical gradient for a vibrant, multi-color effect.
Bar Size: All bars start at 20px height by default.

body {
  background:black;
}

.audio-visualizer {
  width: 320px;
  margin: 3rem auto;
  font-family: system-ui, sans-serif;
  text-align: center;
}

.toggle-btn {
  cursor: pointer;
background: #3F5EFB;
background: linear-gradient(179deg,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-weight: 600;
  user-select: none;
  margin-bottom: 1.5rem;
  display: inline-block;
  transition: background 0.3s;
}

.toggle-btn:hover {
background: #833AB4;
background: linear-gradient(180deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

.bars {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-end;
  height: 160px;
}

.bar {
  width: 18px;
  border-radius: 3px;
  animation: breath 2.5s ease-in-out infinite;
  animation-play-state: paused;
  height: 20px;
  filter: none;
  transition: filter 0.3s ease;
}

/* Each bar's unique gradient color */
.bar1 {
  background: linear-gradient(180deg, #e63946, #a1202b);
  animation-duration: 1.7s;
}
.bar2 {
  background: linear-gradient(180deg, #f4a261, #a86d2b);
  animation-duration: 2.0s;
}
.bar3 {
  background: linear-gradient(180deg, #2a9d8f, #1d675d);
  animation-duration: 1.3s;
}
.bar4 {
  background: linear-gradient(180deg, #e76f51, #a0422a);
  animation-duration: 1.6s;
}
.bar5 {
  background: linear-gradient(180deg, #264653, #152733);
  animation-duration: 1.9s;
}
.bar6 {
  background: linear-gradient(180deg, #ffb703, #c78f00);
  animation-duration: 2.2s;
}
.bar7 {
  background: linear-gradient(180deg, #8ecae6, #5a8fbf);
  animation-duration: 1.5s;
}

/* Breath animation for pause */
@keyframes breath {
  0%, 100% { height: 20px; filter: none; }
  50% { height: 30px; filter: none; }
}

/* Play state bars animation */
@keyframes audioWave {
  0%, 100% { height: 20px; filter: none; }
  25% { height: 100px; filter: blur(2px); }
  50% { height: 60px; filter: blur(1.5px); }
  75% { height: 110px; filter: blur(2.5px); }
}

/* When playToggle is checked, start audio wave animation */
#playToggle:checked ~ .bars .bar {
  animation-name: audioWave;
  animation-play-state: running;
}

/* Stagger the animation delays for wave effect */
#playToggle:checked ~ .bars .bar1 { animation-delay: 0s; }
#playToggle:checked ~ .bars .bar2 { animation-delay: 0.15s; }
#playToggle:checked ~ .bars .bar3 { animation-delay: 0.3s; }
#playToggle:checked ~ .bars .bar4 { animation-delay: 0.45s; }
#playToggle:checked ~ .bars .bar5 { animation-delay: 0.6s; }
#playToggle:checked ~ .bars .bar6 { animation-delay: 0.75s; }
#playToggle:checked ~ .bars .bar7 { animation-delay: 0.9s; }

Codepen Demo

Pure CSS Blob Animation, no svg, no js

Prahalad S — Mon, 03 Nov 2025 15:53:23 +0000

Pure CSS Blob Animation, no svg, no js

Follow me in Instagram

Overview

The Blob Effect in Pure CSS is a dynamic, morphing shape animation that creates an organic “liquid blob” appearance. It uses only CSS properties like border-radius, gradients, and keyframe animation — no JavaScript or external libraries required.

This effect can be used for profile frames, loading animations, or background decorations in modern, vibrant web designs.

<h1>Blob Effect in Pure CSS</h1>

<div class="blob-loader">
  <img src="https://img.freepik.com/free-photo/front-view-beautiful-woman_23-2148574859.jpg" />
</div>

Explanation:

The main container that forms the animated blob.
Optional image inside the blob (you can replace or remove it).
A simple heading for demonstration.

Key Properties:

border-radius — Creates the irregular, “blobby” shape.
linear-gradient — Applies a two-color gradient for visual depth.
animation: morphBlob — Smoothly morphs the blob over time.
filter: drop-shadow — Adds glowing depth around the blob.
overflow: hidden — Keeps the image inside the blob shape.

🎨 CSS Styling

body {
  background: #f44336;
  font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
  text-align: center;
}
.blob-loader {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  filter: drop-shadow(0 0 12px #ff416c);
  animation: morphBlob 8s ease-in-out infinite;
  position: relative;
  margin: 4rem auto;
  cursor: pointer;
  transition: filter 0.3s;
  border: 5px dotted black;
  overflow: hidden;
}

/* Glowing layers with pseudo elements */
.blob-loader::before,
.blob-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(20px);
  opacity: 0.6;
  animation: morphBlob 8s ease-in-out infinite alternate;
  z-index: -1;
}

.blob-loader::before {
  background: #ff416c;
  animation-delay: 0s;
}

.blob-loader::after {
  background: #ff4b2b;
  animation-delay: 4s;
}

@keyframes morphBlob {
  0% {
    border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  }
  25% {
    border-radius: 64% 36% 52% 48% / 62% 38% 64% 36%;
  }
  50% {
    border-radius: 58% 42% 42% 58% / 58% 69% 31% 42%;
  }
  75% {
    border-radius: 42% 58% 58% 42% / 42% 31% 69% 58%;
  }
  100% {
    border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  }
}

/* Speed up morph on hover */
.blob-loader:hover {
  animation-duration: 3s;
  filter: drop-shadow(0 0 24px #fff);
}

.blob-loader:hover::before,
.blob-loader:hover::after {
  animation-duration: 3s;
}

⚙️ How It Works

Morphing Shape: The border-radius property changes smoothly using keyframes.
Depth & Glow: Two blurred pseudo-elements (::before, ::after) create layered color glows.
Hover Animation: The morph speed increases, and the glow brightens on hover.
Pure CSS: No JavaScript — just creative use of gradients, filters, and border manipulation.

codepen demo

Pure CSS Focus Follower

Prahalad S — Sat, 25 Oct 2025 09:10:57 +0000

Pure CSS Focus Follower

Overview
This CSS module creates a visual effect where a single circular element (.follow) moves to follow the currently focused or checked form element (text inputs, checkboxes, or submit button) in a form. When the submit button is clicked, the circle moves in an arc-like path to enhance the visual transition. The effect is implemented purely in CSS, without JavaScript, and is designed to match the behavior of a provided JavaScript-based example where a circle stops 16px to the left of the focused element, vertically centered.

Purpose

Provide an interactive, visually engaging user experience by highlighting the active form element with a moving circle.
Ensure the circle follows clicks on text inputs, checkboxes (both :focus and :checked states), and the submit button.

HTML

  <h2>Focus Follower in {PURE CSS}</h2>
<div class="form-wrapper">
  <form onsubmit="return false;">
    <label for="name">Name</label>
    <input type="text" id="name">

    <label for="email">Email</label>
    <input type="email" id="email">

    <label for="password">Password</label>
    <input type="password" id="password">
    <input type="checkbox" id="check1">
    <label for="check1">I accept the terms</label>
    <button>Submit</button>
    <span class="follow"></span>
  </form>
</div>

CSS

* {
  box-sizing: border-box;
}

:root {
  --spacing: 16px;
  --radius: 8px;
}

html,
body {
  font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
  font-size: 20px;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: #fff;
  background-color: cadetblue;
}

.form-wrapper {
  position: relative;
  height: 500px;
  width: 500px;
  padding: 80px;
  border: 1px dashed #becdcd;
  margin: 0 auto;
}

form {
  margin: auto;
  width: 100%;
  max-width: 400px;
  position: relative;
}

label {
  color: #fff;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  display: block;
  width: 100%;
  margin: 0.5rem 0 1rem 0;
  padding: 0.5rem;
  font-size: 1rem;
  border: 0;
  border-radius: 0.125rem 0.25rem;
  background-color: hsl(222, 20%, 95%);
  position: relative;
}

input[type="checkbox"] {
  margin: 0 0.5rem 0 0;
  width: 1rem;
  height: 1rem;
}

button {
  display: block;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.125rem 0.25rem;
  background-color: darkslategrey;
  color: #fff;
  margin: 2rem 0 0 auto;
  position: relative;
}

input:focus,
button:focus {
  outline: 0;
}

/* Follower element styling */
.follow {
  position: absolute;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  background-color: darkslategrey;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform: translateX(0) translateY(0);
  left: 0;
  top: 0;
}

/* Position follower for each focused or checked element */
#name:focus ~ .follow {
  transform: translateX(calc(-1 * var(--spacing) - var(--radius)))
    translateY(2.35rem);
  opacity: 1;
}

#email:focus ~ .follow {
  transform: translateX(calc(-1 * var(--spacing) - var(--radius)))
    translateY(7.25rem);
  opacity: 1;
}

#password:focus ~ .follow {
  transform: translateX(calc(-1 * var(--spacing) - var(--radius)))
    translateY(12rem);
  opacity: 1;
}

#check1:focus ~ .follow,
#check1:checked ~ .follow {
  transform: translateX(calc(-1 * var(--spacing) - var(--radius)))
    translateY(14.5rem);
  opacity: 1;
}

button:focus ~ .follow {
  transform: translateX(calc(-1 * var(--spacing) - var(--radius) + 12.8rem))
    translateY(18.15rem);

  opacity: 1;
}

WORKING DEMO

Randomized 3D Image Fall with Glow and Flash with Lightbox

Prahalad S — Thu, 23 Oct 2025 12:52:56 +0000

This title captures the essence of the animation: images randomly "fall" or zoom out from the screen in a 3D space with glow and blur effects that dynamically fade away. The final white flash highlights the image placement for visual emphasis. Including "Randomized" reflects the non-linear image animation order, and "3D" indicates the perspective depth used in the effect.

Other possible descriptive titles could be:

"Dynamic 3D Image Drop with Glow and Flash Animation"
"Randomized Zoom-Out Image Grid with Flash Finish"
"Falling Image Grid with Glow Fade and Flash Highlight"
"3D Depth Fall Animation with Glow and Flash End"

These options emphasize the core visual elements: depth/falling motion, glow/blur transitions, and the flash effect that completes the animation sequence.

<div class="gallery-container">
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-adorable-girl-smiling-gesture-peace-purple-background-high-quality-photo_114579-92188.jpg" /><span>Actor</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-woman-playing-poker-casino_23-2151831069.jpg" /><span>Creator</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/beautiful-brunette-woman-evening-dress-smiling-holding-wine-glass_176420-3793.jpg" /><span>Director</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-stylish-sexy-woman-cinema-backstage-celebrating-with-glass-champagne_285396-9020.jpg" /><span>Singer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/medium-shot-smiley-woman-outdoors_23-2149005408.jpg" /><span>Artist</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/close-up-reporter-preparing-interview_23-2149183582.jpg" /><span>Hairstylist</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/beautiful-brunette-woman-evening-dress-smiling-holding-wine-glass_176420-3783.jpg" /><span>Dancer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-woman-playing-poker-casino_23-2151831072.jpg" /><span>Producer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/handsome-man-near-christmas-tree-gentelman-black-suit_1157-45163.jpg" /><span>Composer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/smiling-beautiful-woman-red-dress_329181-18528.jpg" /><span>Fighter</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/side-view-young-man-holding-purple-flower_23-2149539646.jpg" /><span>Model</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/people-taking-part-high-protocol-event_23-2150951341.jpg" /><span>Designer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/elegant-young-woman-room-with-christmas-lights_23-2147724286.jpg" /><span>Comedian</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/hipster-digital-outdoor-lady-hotel-cute_1303-2786.jpg" /><span>Animator</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/woman-sideways-standing-curtain-sparkles_23-2148331904.jpg" /><span>Editor</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-girl-posing-seaport_1157-1485.jpg" /><span>Writer</span></div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/model-wearing-beautiful-shade-clothing_23-2151428009.jpg" /><span>Manager</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/vertical-shot-beautiful-young-lady-front-christmas-tree_181624-30017.jpg" /><span>Technician</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/front-view-man-with-iris-fantasy-colors_23-2150140111.jpg" /><span>VFX</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-beautiful-young-model-plaid-shirt-posing-near-lamps_114579-81048.jpg" /><span>Stunt</span>
  </div>
  <a class="closeBtn">✕</a>
</div>

<div class="gallery-overlay"></div>

CSS

body {
  background: radial-gradient(circle, #161b22 0%, #000a16 100%);
  font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-container {
  width: 550px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  perspective: 1200px;
  position: relative;
}

.image-cell {
  position: relative;
  width: 100%;
  height: 160px;
  opacity: 0;
  /* Start "in your face": big, close to viewer */
  transform: scale(2) translateZ(800px);
  filter: blur(100px) brightness(10);
  border-radius: 16px;
  transition: transform 1.2s cubic-bezier(0.45, 1.5, 0.65, 1), filter 0.8s,
    opacity 0.6s;
  box-shadow: 0 0 42px 0 rgba(125, 255, 255, 0.55);
  overflow: hidden;
  cursor: crosshair;
}

.image-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.image-cell:hover {
  box-shadow: 0 0 42px 0 rgba(125, 255, 255, 1);
}

.image-cell span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  top: 0;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
  /* Smooth transition on opacity */
  pointer-events: none;
}

.image-cell:hover span {
  opacity: 1;
  cursor: crosshair;
  animation: bounce 0.6s ease;
}

.image-cell:hover img {
  filter: blur(25px) brightness(60);
  transition: transform 1.2s cubic-bezier(0.45, 1.5, 0.65, 1), filter 0.8s,
    opacity 0.6s;
}

.image-cell.active {
  opacity: 1;
  /* Land at grid position, smaller, flat */
  transform: scale(1) translateZ(0px);
  filter: none;
}

.image-cell.flash-effect {
  position: relative;
  z-index: 5;
  animation: flashAnimation 0.1s ease forwards;
}

.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.image-cell.fadeOut {
  opacity: 0.3;
  pointer-events: none;
  /* Optional: disable interaction */
  transition: opacity 0.6s ease;
}

.image-cell.centered {
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.2);
  overflow: visible;
  filter: none;
  /* pointer-events: none; */
}

.image-cell.centered img .image-cell.centered:hover,
.image-cell.centered:hover img {
  filter: none;
}

/* Make span visible after centering with animation */
.image-cell.centered span {
  color: #ffffff;
  opacity: 0;
  animation: moveBottom 0.5s ease forwards;
  /* animation-delay: 1s; */
  pointer-events: none;
  top: auto;
  bottom: -90px;
  z-index: -1;
}

/* Disable hover effect on span for centered items */
.image-cell.centered:hover span {
  opacity: 1;
  animation: bounce 0.6s ease, moveBottom 0s 0s;
}

.closeBtn {
  position: absolute;
  right: -30px;
  top: -30px;
  color: white;
  opacity: 0;
  cursor: pointer;
}

.showBtn {
  opacity: 1;
  animation: fadeIn 0.25s ease;
}

.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  z-index: 900;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  cursor: pointer;
  z-index: -1;
}

.gallery-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Flash effect: full white overlay with smooth fade */
@keyframes flashAnimation {
  0%,
  45%,
  55%,
  100% {
    background-color: transparent;
  }

  50% {
    background-color: white;
  }
}

/* Bounce effect */
@keyframes bounce {
  0%,
  40%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }

  45% {
    transform: translateY(-15px);
  }

  85% {
    transform: translateX(-7px);
  }
}

/* Keyframes for sliding span (optional) */
@keyframes moveBottom {
  0% {
    bottom: 0;
    opacity: 0;
  }

  100% {
    bottom: -90px;
    opacity: 1;
  }
}

/* Keyframes for sliding span (optional) */
@keyframes fadeIn {
  0% {
    opacity: 0;
    margin-top: -25px;
  }

  100% {
    opacity: 1;
    margin-top: 0px;
  }
}

Javascript

const colors = ["#ab79ff", "#54fbb8", "#ff7979", "#79ffb9", "#ffd479"];
const cells = Array.from(document.querySelectorAll(".image-cell"));
const overlay = document.querySelector(".gallery-overlay"); // Assuming in HTML
const close = document.querySelector(".closeBtn"); // Assuming in HTML

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// Initial light/shadow animation with random delay
const randomizedCells = shuffle([...cells]);
randomizedCells.forEach((cell, i) => {
  const delay = 300 + Math.random() * 600 + i * 120;
  setTimeout(() => {
    const randColor = colors[Math.floor(Math.random() * colors.length)];
    const randBlur = Math.random() * 2 + 2;
    const randDropShadowSize = Math.random() * 28 + 10;

    cell.style.filter = `blur(${randBlur}px) brightness(${
      1 + Math.random() * 0.7
    }) drop-shadow(0 0 ${randDropShadowSize}px ${randColor})`;
    cell.style.boxShadow = `0 0 ${randDropShadowSize}px ${randColor}`;
    cell.classList.add("active");

    setTimeout(() => {
      cell.style.filter = `none`;

      cell.classList.add("flash-effect");

      setTimeout(() => {
        cell.classList.remove("flash-effect");
      }, 800);
    }, 1200);
  }, delay);
});

// Function to close centered view
function closeCentered() {
  cells.forEach((c) => {
    c.classList.remove("centered", "fadeOut");
    c.style.removeProperty("--dx");
    c.style.removeProperty("--dy");
  });
  //  overlay.classList.remove('active');
}

// Event listeners for cells
cells.forEach((cell) => {
  cell.addEventListener("click", (event) => {
    event.stopPropagation();

    // If this cell is already centered, do nothing (skip)
    if (cell.classList.contains("centered")) {
      return; // Prevent closing or re-centering
    }

    // Close any previously centered
    closeCentered();

    // Calculate translation...
    const rect = cell.getBoundingClientRect();
    const viewportCenterX = window.innerWidth / 2;
    const viewportCenterY = window.innerHeight / 2;
    const dx = viewportCenterX - (rect.left + rect.width / 2);
    const dy = viewportCenterY - (rect.top + rect.height / 2);

    cell.style.setProperty("--dx", `${dx}px`);
    cell.style.setProperty("--dy", `${dy}px`);

    cell.classList.add("centered");
    close.classList.add("showBtn");

    cells.forEach((c) => {
      if (c !== cell) {
        c.classList.add("fadeOut");
      }
    });
  });

  // Show overlay
  //   overlay.classList.add('active');
});

// Clicking on overlay closes the centered image
// overlay.addEventListener('click', () => {
//   closeCentered();
// });

// Clicking on close
close.addEventListener("click", () => {
  closeCentered();
  close.classList.remove("showBtn");
});

// Clicking outside gallery also close centered (optional)
// document.addEventListener('click', () => {
//   closeCentered();
// });

// Prevent overlay click from closing when clicking inside gallery-container
const galleryContainer = document.querySelector(".gallery-container");
galleryContainer.addEventListener("click", (e) => {
  e.stopPropagation();
});

Working Demo

Radial Explosion Zoom Gallery Effect

Prahalad S — Tue, 21 Oct 2025 11:00:07 +0000

This is a "bomb blast" or "explosion zoom" gallery effect — where clicking a thumbnail pushes all other images outward and centers/zooms the selected one, creating a dramatic, explosive layout transition.
Below is a complete working example using HTML, CSS, and JavaScript (vanilla) to recreate this effect.

Features:

Grid of images
Click any image → it expands to center
All other images shrink and scatter around it
Click again or outside → reset to grid
Smooth animations with CSS transitions
Responsive & works on any screen

<div class="overlay" id="overlay"></div>
<div class="gallery" id="gallery"></div>

CSS

* {margin:0;padding:0;box-sizing:border-box;}
  body {background:#000;overflow:hidden;height:100vh;font-family:sans-serif;}
  .gallery {position:relative;width:100vw;height:100vh;}
  .item {
    position:absolute;
    cursor:pointer;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.5);
    transition: all .7s cubic-bezier(.2,.8,.2,1);
    transform-origin:center;
  }
  .item img {width:100%;height:100%;object-fit:cover;display:block;}
  .like {position:absolute:absolute;top:6px;right:6px;width:26px;height:26px;
    background:rgba(255,255,255,.2);border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:15px;opacity:0;
    transition:.3s;backdrop-filter:blur(4px);}
  .item:hover .like,.item.expanded .like{opacity:1;}

  .caption {
    position:absolute;bottom:0px;left:0;right:0; 
    background:linear-gradient(transparent,rgba(0,0,0,.8));
    color:#fff;padding-bottom:25px;text-align:center;font-size:13px;opacity:0; line-height:25px;
    transition:opacity .4s;pointer-events:none;
  }
  .item.expanded .caption{opacity:1;font-size:16px;}
  .overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.8);
    opacity:0;pointer-events:none;transition:opacity .5s;z-index:999;
  }
  .overlay.active{opacity:0.25;pointer-events:all;}

Javascript

createImages():- Makes all image boxes once
arrangeImages():- Puts them in a circle
expandImage():- Makes one big + pushes others away
closeExpanded():- Returns everything to normal

  /* ============================================================= */
  /*            BOMB BLAST GALLERY - WITH HOVER LIFT EFFECT         */
  /* ============================================================= */

  // === STEP 1: SETTINGS ===
  const TOTAL_IMAGES = 50;
  const EXPANDED_WIDTH = 380;
  const EXPANDED_HEIGHT = 500;
  const MIN_SIZE = 70;
  const MAX_SIZE = 120;

  // === STEP 2: Sample Artworks ===
  const artworks = [
    { url: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Frans_Hals_-_Portrait_of_Tieleman_Roosterman.jpg/800px-Frans_Hals_-_Portrait_of_Tieleman_Roosterman.jpg",
      title: "Portrait of Tieleman Roosterman (1654)", artist: "Frans Hals", views: "213" },
    { url: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg",
      title: "Starry Night", artist: "Vincent van Gogh", views: "1.2M" },
    { url: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
      title: "Mona Lisa", artist: "Leonardo da Vinci", views: "3.5M" },
    { url: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/The_Great_Wave_off_Kanagawa.jpg/800px-The_Great_Wave_off_Kanagawa.jpg",
      title: "The Great Wave", artist: "Hokusai", views: "890K" }
  ];

  // === STEP 3: Get HTML elements ===
  const gallery = document.getElementById('gallery');
  const overlay = document.getElementById('overlay');

  // === STEP 4: Store image boxes and data ===
  let imageBoxes = [];
  let originalData = [];
  let expandedIndex = null;

  // === STEP 5: Create all images ===
  function createImages() {
    for (let i = 0; i < TOTAL_IMAGES; i++) {
      const box = document.createElement('div');
      box.className = 'item';

      const img = document.createElement('img');
      img.loading = 'lazy';

      if (i < artworks.length) {
        img.src = artworks[i].url;
        box.dataset.title = artworks[i].title;
        box.dataset.artist = artworks[i].artist;
        box.dataset.views = artworks[i].views;
      } else {
        img.src = `https://picsum.photos/300/400?random=${i}`;
        box.dataset.title = `Artwork #${i + 1}`;
        box.dataset.artist = `Artist ${i + 1}`;
        box.dataset.views = `${Math.floor(Math.random() * 2000)}K`;
      }

      const like = document.createElement('div');
      like.className = 'like';
      like.textContent = 'Heart';

      const caption = document.createElement('div');
      caption.className = 'caption';
      caption.innerHTML = `
        <strong>${box.dataset.title}</strong><br>
        <em>${box.dataset.artist}</em><br>
        <small>On view in ${box.dataset.views} museums</small>
      `;

      box.appendChild(img);
      box.appendChild(like);
      box.appendChild(caption);
      gallery.appendChild(box);

      imageBoxes.push(box);

      const size = MIN_SIZE + Math.random() * (MAX_SIZE - MIN_SIZE);
      const width = size;
      const height = size * 1.3;
      originalData[i] = { width, height };

      // === HOVER EFFECT: Lift on mouse over ===
      box.addEventListener('mouseenter', () => {
        if (expandedIndex !== null) return; // Don't lift if something is expanded
        box.style.zIndex = 10;
        box.style.transform = 'scale(1.05)'; // Optional: slight grow
      });

      box.addEventListener('mouseleave', () => {
        if (expandedIndex !== null) return;
        box.style.zIndex = 1;
        box.style.transform = 'scale(1)';
      });

      box.onclick = () => toggleImage(i);
    }

    arrangeImages();
  }

  // === STEP 6: Arrange in circle ===
  function arrangeImages() {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    imageBoxes.forEach((box, i) => {
      const data = originalData[i];
      const angle = (i / TOTAL_IMAGES) * 2 * Math.PI;
      const distance = 100 + (i % 4) * 80;

      const x = centerX + Math.cos(angle) * distance - data.width / 2;
      const y = centerY + Math.sin(angle) * distance - data.height / 2;

      data.x = x;
      data.y = y;

      box.style.left = x + 'px';
      box.style.top = y + 'px';
      box.style.width = data.width + 'px';
      box.style.height = data.height + 'px';
      box.style.opacity = 1;
      box.style.transform = 'rotate(0deg) scale(1)';
      box.style.zIndex = 1; // Reset z-index
    });
  }

  // === STEP 7: Toggle expand ===
  function toggleImage(index) {
    if (expandedIndex === index) {
      closeExpanded();
    } else {
      expandImage(index);
    }
  }

  // === STEP 8: Expand image ===
  function expandImage(index) {
    if (expandedIndex !== null) closeExpanded();
    expandedIndex = index;
    overlay.classList.add('active');

    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    imageBoxes.forEach((box, i) => {
      const data = originalData[i];

      if (i === index) {
        box.classList.add('expanded');
        box.style.left = (centerX - EXPANDED_WIDTH / 2) + 'px';
        box.style.top = (centerY - EXPANDED_HEIGHT / 2) + 'px';
        box.style.width = EXPANDED_WIDTH + 'px';
        box.style.height = EXPANDED_HEIGHT + 'px';
        box.style.zIndex = 1000;
        box.style.transform = 'scale(1)';
      } else {
        const rect = box.getBoundingClientRect();
        const boxCenterX = rect.left + rect.width / 2;
        const boxCenterY = rect.top + rect.height / 2;

        const dx = boxCenterX - centerX;
        const dy = boxCenterY - centerY;
        const distance = Math.sqrt(dx * dx + dy * dy) || 1;
        const angle = Math.atan2(dy, dx);
        const pushDistance = distance * 1.5 + 300;

        const newX = centerX + Math.cos(angle) * pushDistance - data.width / 2;
        const newY = centerY + Math.sin(angle) * pushDistance - data.height / 2;

        box.style.left = newX + 'px';
        box.style.top = newY + 'px';
        box.style.width = data.width * 0.6 + 'px';
        box.style.height = data.height * 0.6 + 'px';
        box.style.opacity = 0.7;
        box.style.transform = `rotate(${angle * 180 / Math.PI + 720}deg) scale(0.6)`;
        box.style.zIndex = 10;
      }
    });
  }

  // === STEP 9: Close expanded ===
  function closeExpanded() {
    overlay.classList.remove('active');
    expandedIndex = null;

    imageBoxes.forEach((box, i) => {
      const data = originalData[i];
      box.classList.remove('expanded');
      box.style.left = data.x + 'px';
      box.style.top = data.y + 'px';
      box.style.width = data.width + 'px';
      box.style.height = data.height + 'px';
      box.style.opacity = 1;
      box.style.transform = 'rotate(0deg) scale(1)';
      box.style.zIndex = 1;
    });
  }

  // === STEP 10: Events ===
  overlay.onclick = closeExpanded;
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeExpanded();
  });

  window.addEventListener('resize', () => {
    if (expandedIndex === null) {
      arrangeImages();
    } else {
      expandImage(expandedIndex);
    }
  });

  // === STEP 11: Start ===
  createImages();

Working Demo

Multi-Layer Cinematic Scroll Scene in Pure CSS

Prahalad S — Mon, 20 Oct 2025 17:00:29 +0000

Let’s go full cinematic: A particle-like scroll experience where multiple morphing blobs float, rotate, scale, and drift across the viewport as you scroll. Each blob will behave independently, creating a dynamic, particle-art scroll effect, all in pure CSS.

HTML

<!-- Multi-layered blobs -->
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>

<!-- Sections -->
<section>
  <h2>Welcome to the cinematic scroll art</h2>
</section>

<section>
  <h2>Blobs morph, rotate, scale and change color</h2>
</section>

<section>
  <h2>Fully scroll-tied animation with pure CSS</h2>
</section>

<section>
  <h2>Each blob moves independently, layered for depth</h2>
</section>

<section>
  <h2>This is interactive CSS artwork!</h2>
</section>

CSS

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #0f172a;
  color: white;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-align: center;
  position: relative;
}

h2 {
  anchor-name: --section-anchor; /* anchor for scroll-tied animation */
  z-index: 10;
  position: relative;
}

/* Base blob style */
.blob {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  border-radius: 50%;
  filter: blur(70px);
  z-index: 1;
  animation-timeline: scrollTimeline;
  position-anchor: --section-anchor;
  scroll-timeline-name: scrollTimeline;
  scroll-timeline-axis: block;
  scroll-timeline: auto;
  animation-duration: 1;
  animation-fill-mode: both;
}

/* Individual blobs with unique size, gradient, animation */
.blob:nth-child(1) {
  width: 40vw;
  height: 40vw;
  background: linear-gradient(135deg, #0ea5a4, #3b82f6);
  animation-name: morph1;
}

.blob:nth-child(2) {
  width: 35vw;
  height: 35vw;
  background: linear-gradient(135deg, #f97316, #facc15);
  animation-name: morph2;
}

.blob:nth-child(3) {
  width: 45vw;
  height: 45vw;
  background: linear-gradient(135deg, #d946ef, #8b5cf6);
  animation-name: morph3;
}

.blob:nth-child(4) {
  width: 30vw;
  height: 30vw;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  animation-name: morph4;
}

.blob:nth-child(5) {
  width: 50vw;
  height: 50vw;
  background: linear-gradient(135deg, #f43f5e, #f97316);
  animation-name: morph5;
}

/* Scroll timeline for all blobs */
@scroll-timeline scrollTimeline {
  source: auto;
  orientation: block;
}

/* Keyframe animations for each blob */
@keyframes morph1 {
  0% {
    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  25% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: translate(-50%, -50%) rotate(10deg) scale(1.05);
  }
  50% {
    border-radius: 40% 60% 60% 40% / 40% 60% 50% 50%;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.95);
  }
  75% {
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.02);
  }
  100% {
    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

@keyframes morph2 {
  0% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 55% 45% 60% 40% / 40% 60% 50% 50%;
    transform: rotate(-8deg) scale(1.03);
  }
  50% {
    border-radius: 50% 50% 40% 60% / 60% 40% 55% 45%;
    transform: rotate(6deg) scale(0.97);
  }
  75% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: rotate(-4deg) scale(1.01);
  }
  100% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes morph3 {
  0% {
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
    transform: rotate(12deg) scale(1.04);
  }
  50% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(-10deg) scale(0.96);
  }
  75% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: rotate(8deg) scale(1.02);
  }
  100% {
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes morph4 {
  0% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    transform: rotate(-6deg) scale(1.03);
  }
  50% {
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
    transform: rotate(6deg) scale(0.97);
  }
  75% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(-3deg) scale(1.01);
  }
  100% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes morph5 {
  0% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: rotate(7deg) scale(1.05);
  }
  50% {
    border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
    transform: rotate(-7deg) scale(0.95);
  }
  75% {
    border-radius: 55% 45% 50% 50% / 50% 50% 55% 45%;
    transform: rotate(3deg) scale(1.02);
  }
  100% {
    border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
    transform: rotate(0deg) scale(1);
  }
}

/* Text floating above blobs */
section h2 {
  z-index: 10;
  position: relative;
  mix-blend-mode: difference;
}

🌟 Features:-

8 independent morphing blobs
Different sizes, shapes, gradients, rotations, scaling
Scroll-tied animation
Fully driven by position-anchor + scroll-timeline
Depth & layering
Blobs overlap with blur to create a 3D particle-like effect
Dynamic color gradients
Each blob changes color subtly as you scroll
Text interacts visually
mix-blend-mode: difference makes text pop over the moving blobs
Pure CSS

Working Demo

Dynamic Image Animation: Smooth Transition from Original Position to Screen Center with Lightbox in CSS and JS

Prahalad S — Sat, 11 Oct 2025 12:00:57 +0000

Dynamic Image Animation: Smooth Transition from Original Position to Screen Center with Lightbox in CSS and JS

Overview
This animation creates an infinite circular motion effect of images arranged in a carousel. The images rotate around a fixed point on the screen, simulating a circular path. Navigation buttons allow scrolling through images smoothly. Clicking an image opens it in a lightbox for enlarged viewing.

HTML Structure

Container: Wraps the entire carousel and controls.
Navigation Buttons: Two buttons (prev and next) to rotate the carousel left or right.
Carousel: Contains multiple .image-wrapper elements, each holding an image and a caption.
Top Center Text: Displays the caption of the image currently closest to the top center.
Lightbox: A modal overlay that shows the clicked image in larger form with a close button.

<div class="container">

  <div class="carousel">
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-mountain-landscape_23-2149158786.jpg"><span>Mountain Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/hand-drawn-flat-mountain-landscape_23-2149174187.jpg"><span>Hill View</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/gradient-mountain-landscape_23-2149162007.jpg"><span>Evening Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/illustrated-blue-gradient-tropical-forest-landscape_23-2148262369.jpg"><span>Forest Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/background-with-mountain-landscape-flat-design_23-2148299136.jpg"><span>Avatar Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/elegant-beautiful-sunset-scene-background-with-palm-tree_1055-17708.jpg"><span>Sunset Background</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/seaside-white-birds-colorful-background-watercolor-vector_53876-157807.jpg"><span>White Birds</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/illustrated-landscape-with-mountains-forest_23-2148262368.jpg"><span>Mountain and River</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/hand-drawn-adventure-background_23-2149051021.jpg"><span>Adventure Background</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/flat-design-mountain-landscape_23-2149172160.jpg"><span>Sunrise Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/artistic-gradient-mountains-landscape_23-2148261005.jpg"><span>Gradient Landscape</span></div>
    <div class="image-wrapper"><img src="https://img.freepik.com/free-vector/hand-drawn-rural-landscape-background_52683-123607.jpg"><span>Rural Landscape</span></div>
  </div>
  <button class="nav-button" id="prev">&#8672;</button>
  <button class="nav-button" id="next">&#8674;</button>
  <div class="top-center-text"></div>
</div>

<div id="lightbox">
  <span id="close">&times;</span>
</div>

CSS Styling

Body uses flexbox for centering with dark background and white text.
Carousel and images use absolute positioning to enable circular rotation.
Smooth transformations (transform 0.5s ease) enable animated rotation.
Navigation buttons are fixed on the sides with semi-transparent backgrounds.
Lightbox is hidden by default and shown as a fixed overlay when active.
Image captions are hidden by default except for the one near the top center.

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
  overflow: hidden;
  color: #fff;
}

.container {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel {
  position: relative;
  width: 800px;
  height: 400px;
  margin-bottom: 20px;
}

.image-wrapper {
  position: absolute;
  top: 150px;
  left: 350px;
  width: 100px;
  height: 100px;
  transition: transform 0.5s ease;
  cursor: pointer;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.image-wrapper span {
  display: none;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.nav-button {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-size: 20px;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 0;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

.top-center-text {
  font-size: 1.2em;
  color: #fff;
  position: absolute;
  text-align: center;
  top: 35%;
  transition: top 0.25s ease;
}

.showTitle {
  top: 100%;
  z-index: 2;
}

#lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1;
}

#close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

JavaScript Functionality
Key Variables

radius: Radius in pixels of the circular path for the images.
angleStep: Degree step between each image on the circle (30 degrees).
currentRotation: The current rotation angle offset for the carousel.

Normalizing Rotation
A helper function ensures angles wrap between -180 and 180 degrees for proper visibility calculations updateCarousel();

This function: updateCarousel();

Calculates each image's angle plus current rotation.
Normalizes angle.
Sets visibility based on angle range (-90° to 90° visible).
Rotates each image around the circle using CSS transform: rotate + translateY for radial positioning.
Tracks which image is closest to the top center (angle near 0°) to update the caption displayed in the top center text.
Navigation Event Listeners
Next button decreases currentRotation by angleStep to rotate clockwise.
Prev button increases currentRotation by angleStep to rotate counterclockwise.
Both trigger updateCarousel() with smooth transform animations.

Lightbox Functionality

Clicking an image opens the lightbox with that image's source.
Clicking the close button or outside the image closes the lightbox.

const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const topCenterText = document.querySelector(".top-center-text");
const images = Array.from(document.querySelectorAll(".image-wrapper"));
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
const closeButton = document.getElementById("close");

const radius = 250;
const angleStep = 30;
let currentRotation = -90;

function normalizeRotation(rotation) {
  rotation = (rotation + 180) % 360;
  if (rotation < 0) rotation += 360;
  return rotation - 180;
}

function updateCarousel() {
  let closestAngle = 180;
  let topImage = null;

  images.forEach((img, index) => {
    let angle = index * angleStep + currentRotation;
    angle = normalizeRotation(angle);

    const visible = angle >= -90 && angle <= 90;
    img.style.visibility = visible ? "visible" : "hidden";
    img.style.transform = `rotate(${angle}deg) translate(0, -${radius}px)`;

    if (Math.abs(angle) < closestAngle) {
      closestAngle = Math.abs(angle);
      topImage = img;
    }
  });

  // Hide all spans
  images.forEach((img) => (img.querySelector("span").style.display = "none"));

  if (topImage) {
    const spanText = topImage.querySelector("span").textContent;
    topCenterText.textContent = spanText;
    //  topImage.querySelector('span').style.display = 'block';
  }
}

// Next button
nextButton.addEventListener("click", () => {
  currentRotation -= angleStep;
  images.forEach((img) => (img.style.transition = "transform 0.5s ease"));
  updateCarousel();
});

// Prev button
prevButton.addEventListener("click", () => {
  currentRotation += angleStep;
  images.forEach((img) => (img.style.transition = "transform 0.5s ease"));
  updateCarousel();
});

// Lightbox functionality
images.forEach((img) => {
  img.addEventListener("click", () => {
    lightbox.style.display = "flex";
    topCenterText.classList.add("showTitle");
    // lightboxImg.src = img.querySelector("img").src;
    img.style.cssText =
      "width:250px; height:250px; z-index:2; transition:0.25s ease; left: 50%; transform: translateX(-50%);";
  });
});

closeButton.addEventListener("click", () => {
  lightbox.style.display = "none"; // hide the lightbox

  // Reset all images to their original state
  images.forEach((img) => {
    img.style.cssText =
      "width:100px; height:100px; z-index:1; transition:0.25s ease;";
  });
  topCenterText.classList.remove("showTitle");
  updateCarousel();
});

// Initialize
updateCarousel();

This structure allows an infinite circular animation of images with intuitive user controls and an accessible lightbox for enhanced viewing.

Working DEMO :
Codepen Demo

Click anywhere to see Spark Effect(fireworks) using CSS and JS

Prahalad S — Sat, 27 Sep 2025 03:28:30 +0000

Click anywhere to see Spark Effect(fireworks) using CSS and JS

Let's Begin! Create html.

HTML

<h2>click anywhere to spark effect(fireworks)</h2>

CSS

body {
    height: calc(100vh - 16px);
    width: calc(100vw - 23px);
    background: rgb(63, 63, 63);
}

h2 {
    opacity: 0.25;
    color: white;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 22px;
    font-weight: lighter;
    font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
}

ul {
    position: absolute;
    width: 22px;
    height: 22px;
    list-style: none;
    margin: -6px 0 0 -32px;
}

ul li {
    padding: 0px;
    width: 0px;
    height: 0px;
    position: absolute;
    left: auto;
    right: auto;
}

ul li:first-child {
    left: 50%;
    top: -22px;
    width: 1px;
    height: 0px;
    rotate: 0deg;
    border-left: 1px solid beige;
    animation: vert .25s linear;
}

ul li:nth-child(2) {
    left: 50%;
    bottom: -22px;
    width: 1px;
    height: 0px;
    rotate: 0deg;
    border-left: 1px solid beige;
    animation: vert .25s linear;
}

ul li:nth-child(3) {
    left: -6px;
    top: 11px;
    rotate: 0deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(4) {
    right: -6px;
    rotate: 0deg;
    top: 11px;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(5) {
    left: 0px;
    top: -11px;
    rotate: 45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(6) {
    right: 0px;
    top: -11px;
    rotate: -45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(7) {
    left: 0px;
    bottom: -11px;
    rotate: -45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(8) {
    right: 0px;
    bottom: -11px;
    rotate: 45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

@keyframes vert {
    from {

        height: 22px;
    }

    to {

        height: 0px;
    }
}

@keyframes horiz {
    from {
        width: 22px;
    }

    to {
        width: 0px;
    }
}

and JS

document.body.addEventListener('click', function (event) {
    const ul = document.createElement('ul');
    ul.style.left = event.pageX + 'px'; ul.style.top = event.pageY + 'px';
    for (let i = 1; i <= 8; i++) { const li = document.createElement('li'); ul.appendChild(li); }
    document.body.appendChild(ul);
    setTimeout(() => { ul.remove(); }, 250);
});

That's it!.

Click anywhere to see the spark effect.

Below is the url for DEMO :
Codepen Demo

images vanish in our posts. why? does this website lacks professionality?

Prahalad S — Wed, 16 Apr 2025 17:03:16 +0000

Pure CSS Range Slider with custom variables

Prahalad S — Sat, 15 Mar 2025 08:07:52 +0000

Tutorial for 'Pure CSS Range Slider with custom variables'

Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Let's Begin! Create img element and 3 range sliders

Image Element
<img src="img/1.jpg" alt="">
Sliders
Each slider is enclosed in a <div> with a class for styling and functionality.

Slider 1: Alpha (Transparency)
Slider 2: Color Adjustment
Slider 3: Border Thickness

Below is the html code

<img class="image" src="img/1.jpg" alt="">

<div class="slider slider1">
    <input type="range" name="alpha" value="100"
        style="--img:--_a"><span></span>
</div>
<div class="slider slider2">
    <input type="range" name="color" value="50"
        style="--img:--_c"><span></span>
</div>

<div class="slider slider3">
    <input type="range" name="border" value="100"
        style="--img:--_b"><span></span>
</div>

We have assigned custom variables to every range slider:

--img:a affects opacity
--img:c affects filter like : grayscale() hue-rotate(), contrast() etc
--img:b changes border-width

CSS

Let's create @property CSS for alpha(opacity) which defines custom properties (CSS variables) with specific types, inheritance behavior, and default values. Let's create for --_a(alpha), --_c(color), --_b(border).

Also the following CSS code snippet defines a custom property (--alpha) that dynamically interpolates between a minimum (--alpha-min) and maximum (--alpha-max) value based on a control variable (--_a). So lets make it for --color and --border too.

Also create @keyframes for variables --_a, --_c, --_b by assigning at (0%), setting it to 1.

@property --_a {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --_c {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --_b {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    /* alpha */
    --alpha-min: 0; --alpha-max: 1;
    --alpha: calc(var(--alpha-max) * var(--_a) + 
              var(--alpha-min) * (1 - var(--_a)));

    /* color */
    --color-min: 1; --color-max: 0;
    --color: calc(var(--color-max) * var(--_c) + 
              var(--color-min) * (1 - var(--_c))); 

    /* border */
    --border-min: 0; --border-max: 50;
    --border: calc(var(--border-max) * var(--_b) + 
              var(--border-min) * (1 - var(--_b))); 

   timeline-scope: --_a, --_c, --_b;  
   animation: linear both;
   animation-timeline: --_a, --_c, --_b;
   animation-name: --_a, --_c, --_b;
   animation-range: entry 100% exit 0%;         
}

@keyframes --_a { 0% { --_a: 1 }}
@keyframes --_c { 0% { --_c: 1 }}
@keyframes --_b { 0% { --_b: 1 }}

Let's create page styling with below CSS

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: lab(30 9.9 -22.11);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
    color: bisque;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

h2 { font-size: 50px}

.slider {
    position: relative;
    width: 300px;
    margin-top: 50px;
    background: white;
    height: 10px;
    border-radius: 5px;
}

.slider1 span,
.slider2 span,
.slider3 span {
    position: absolute;
    left: -140px;
    top: -10px;
    width: 125px;
    text-align: right;
    color: bisque;
}

input[type="range"] {
    overflow: hidden;
    position: absolute;
    top: -7px;
    left: -2px;
    width: 300px;
    background: transparent;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    background: rgb(244, 114, 166);
    view-timeline: var(--img) inline;
}

input[type="range"]::-moz-slider-thumb {
    view-timeline: var(--img) inline;
}

.slider1 span:before {
    content:'alpha(' counter(a) '%)';
    counter-reset: a calc(var(--alpha) / 0.01);
}

.slider2 span:before {
    content:'color(' counter(b) '%)';
    counter-reset: b calc(100 * (1 - var(--color)));
}

.slider3 span:before {
    content:'border(' counter(c) '%)';
    counter-reset: c var(--border);
}

Now let's assign the custom variables to image to control opacity, color and border.

.image {
    width: 300px;
    border: 5px solid bisque;
    filter: opacity(var(--alpha))
            grayscale(var(--color));
    border-radius: calc(var(--border) * 1%);
}

Result

Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

watch Codepen Demo

CSS Shape Slider with 1 line of JS Code

Prahalad S — Tue, 04 Mar 2025 17:41:40 +0000

Tutorial for 'CSS Shape Slider' using 1 line of JS Code.

Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Let's Begin!

Overview

This section of the HTML document contains a CSS-based slider <input type="range"> that dynamically updates the class of a shape element <div class="shape">. As the user moves the slider, the shape’s class name changes, allowing for styling modifications based on the selected value.

HTML Structure

<input type="range" min="0" max="80" value="60" step="10" oninput="this.nextElementSibling.className = 'shape' + ' ' + 'shape' + this.value">

type="range": Defines a slider input element.
min="0": Sets the minimum value of the slider.
max="80": Sets the maximum value of the slider.
value="60": Sets the initial value of the slider when the page loads.
step="10": Defines the increments in which the slider moves.

- oninput event handler:

When the user interacts with the slider, it dynamically updates the class name of the next sibling element (the shape).
The new class name consists of "shape" followed by "shape" and the slider's value (e.g., "shape shape60").
This allows CSS rules targeting different .shapeXX classes to apply specific styles.

Functionality

As the slider moves, the shape’s class changes dynamically.
Different CSS rules can be applied based on the class name assigned to the shape.
Allows for real-time styling changes without requiring JavaScript beyond the inline event handler.

Below is the Html code:

<body>
    <h3>CSS Slider</h3>
    <div class="shape-container">
        <input type="range" min="0" max="80" value="60" step="10"
        oninput="this.nextElementSibling.className = 'shape' + ' ' + 'shape' + this.value">
        <div class="shape shape60"></div>
    </div>
</body>

Styling

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #607D8B;
    font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

h3{
  color: white;
  font-size: 30px;
  position: relative;
  font-weight: bold;
}

input[type="range"] {
    width: 300px;
    margin-top: 20px;
    appearance: none;
    background:#c6e6ff;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: -50px;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #d2739d;
    border-radius: 50%;
    cursor: pointer;
}

.shape-container {
    position: relative;
    top: 0px;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0px 5px 5px rgba(50, 50, 0, 0.5));
}

.shape {
    width: 100%;
    height: 100%;
    background: #ffeccb;
    transition: clip-path 0.3s ease-in-out;
}

.shape:before{
    position: absolute;
    left: 50%;
    top: 50%;
    color: #795548;
    transform: translate(-50%, -50%);
}

/* Defining shape transformations */
.shape0 {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
} /* Triangle */

.shape0:before{
    content: 'Triangle';
}

.shape10 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
} /* Square */

.shape10:before{
    content: 'Square';
}

.shape20 {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
} /* Pentagon */

.shape20:before{
    content: 'Pentagon';
}

.shape30 {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
} /* Hexagon */

.shape30:before{
    content: 'Hexagon';
}

.shape40 {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
} /* Heptagon  */

.shape40:before{
    content: 'Heptagon';
}

.shape50 {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
} /* Octagon */

.shape50:before{
    content: 'Octagon';
}

.shape60 {
    clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
} /* Nonagon  */

.shape60:before{
    content: 'Nonagon';
}

.shape70 {
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
} /* Decagon */

.shape70:before{
    content: 'Decagon';
}

.shape80 {
    clip-path: circle(50% at 50% 50%);
} /* Circle */

.shape80:before{
    content: 'Circle';
}

Output:

Thank you for making it this far. Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Codepen Demo