The Power of Pure CSS - No JavaScript Needed

17

Circular Loader

By: Nethan Pogi

@import url(https://fonts.bunny.net/css?family=krub:200i,300);

body {
  font-family: 'Krub', sans-serif;
  background-color: rgb(248, 244, 238);
  color: rgb(10, 10, 10);
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  display: grid;
  place-content: center;
}

/* Wrapper */
.wrapper {
  perspective: 500px;
  transform-style: preserve-3d;
  position: relative;
  display: grid;
  place-content: center;
}

.wrapper::before {
  content: "What";
  font-size: clamp(2rem, 5.5vw, 20rem);
  text-transform: uppercase;
  text-decoration: underline overline;
  text-decoration-color: hsl(70, 100%, 40%);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  font-weight: 700;

animation: swapText 15s linear infinite,
             rotateWrapper 15s linear infinite;
}

/* Text swapping animation */
@keyframes swapText {
  10%, 100% { content: "What"; }
  20% { content: "goes"; }
  50% { content: "around"; }
  60% { content: "comes"; }
  90% { content: "around"; }
}

/* Rotation animation */
@keyframes rotateWrapper {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

17

Swap Text Animation

By: Nethan Pogi

* {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  margin: 50px auto;
  border: 15px solid var(--black);
  border-radius: 5px;
}

:root {
  --black: #08170a;
  --black-green: #0f2913;
  --green-black: #1e5225;
  --green-black-medium: #26915d;
  --green: #06ba78;
  --green-white-medium: #6ccf93;
  --green-white: #b8ffc0;
}

.box {
  width: 200px;
  height: 200px;
  background: var(--black-green);
  overflow: hidden;
}

.box .background {
  /* size of box plus tile size * 2 */
  width: calc(100% + 100px);
  height: calc(100% + 100px);

/* tile picture */
  background: linear-gradient(124deg, var(--green-black) 12px, transparent 13px) -50px 0px,
    linear-gradient(236deg, var(--green-black-medium) 12px, transparent 13px) -50px 0px,
    linear-gradient(303deg, var(--green-white-medium) 12px, transparent 13px) -25px -12px,
    linear-gradient(58deg, var(--green-white) 12px, transparent 13px) 25px -12px;

/* tile size */
  background-size: 50px 50px;

animation: slide 5s linear infinite;
}

/* move only the tile size */
@keyframes slide {
  0% {
    transform: translate(-50px, 0);
  }
  100% {
    transform: translate(0, -50px);
  }
}

16

Animated Tile Background

By: Nethan Pogi

16

Border Trace

By: Nethan Pogi

16

Loading Animation

By: Nethan Pogi

15

Pulse Animation

By: Nethan Pogi

.glass-grid {
        font-size: 5vmin;
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(4, 1fr);
    }
    .glass-effect {
        background-color: oklch(1 0 0 / 10%);
        backdrop-filter: blur(0.25em) brightness(1.2) saturate(1.2);
        min-height: 2.5em;
        min-width: 2.5em;
        border-radius: 2em;
        box-shadow:
          /* direct "classic" shadow */
          0 0.1em 0.25em 0 oklch(0 0 0 / 15%), 
          /* ambient shadow */
          0 0 1em 0 oklch(0 0 0 / 12.5%),      
          /* top left corner highlight */
          inset 0.075em 0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* bottom right corner highlight */
          inset -0.075em -0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* inside shadow, occlusion arround the corners */
          inset 0 0 3em .5em oklch(0 0 0 / 20%);

transform: scale(1);
        transition: transform .1s ease-out, background-color .15s ease-out;
        &:hover {
            transform: scale(1.02);
            background-color: oklch(1 0 0 / 15%);
        }
    }
    
    .glass-1-1 {

}
    .glass-2-1 {
        grid-column: 2 span;
    }
    .glass-4-1 {
        grid-column: 4 span;
    }
    .glass-2-2 {
        grid-column: 2 span;
        grid-row: 2 span;
    }

body { padding: 0; margin: 0;}
    * {
        box-sizing: border-box;
    }
    main  {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
body {
  background-color: #dcded1;
  background-size: cover;
  background-position: 50% 50%;
}

15

Glass Effect Icons

By: Nethan Pogi

body {
  height: 100vh;
  display: grid;
  place-items: center;
  counter-reset: cnt 0;
  margin: 0;

&:has(label:last-of-type > :checked) label:first-of-type {
    transform: translateX(50vmin);
    z-index: 0;        
  }
  &:has(label:first-of-type > :checked) label:last-of-type {
    z-index: 0;       
  }  
}

label {
  display: inline-block;
  background-color: #eef;
  position: absolute;
  width: 35vmin;
  height: 50vmin;
  margin-left: -50vmin;
  border: 1vmin solid #889;
  border-radius: 5vmin;    
  color: #889;   
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

input { appearance: none; }
  &:has(:checked) {
    background-color: #aac;
    transform: translateX(25vmin) scale(1.1);
    box-shadow: 0 0 25px 2px #223;        
    color: #223;
    z-index: 1;

& ~ label {
      z-index: -1;
    }    
    & + label {
      transform: translateX(50vmin);
      z-index: 0;
    }          
  }

&::before {
    content: counter(cnt);
    counter-increment: cnt 1;
    position: absolute;
    display: grid;
    place-items: center;        
    width: 100%;
    height: 100%;
    font-size: 15vmin;
  }
}

15

Card Carousel

By: Nethan Pogi

body {
  background: #ede9de; 
}
.container {
  left: 50%;
  margin: auto -50px;
  position: absolute;
  top: 50%;
}
.swing div {
  border-radius: 50%;
  float: left;
  height: 1em;
  width: 1em;
}
.swing div:nth-of-type(1) {
  background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);
  background: linear-gradient(to right, #385c78 0%, #325774 100%);
}
.swing div:nth-of-type(2) {
  background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);
  background: linear-gradient(to right, #325774 0%, #47536a 100%);
}
.swing div:nth-of-type(3) {
  background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);
  background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);
}
.swing div:nth-of-type(4) {
  background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);
  background: linear-gradient(to right, #744c55 0%, #954646 100%);
}
.swing div:nth-of-type(5) {
  background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);
  background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);
}
.swing div:nth-of-type(6) {
  background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);
  background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);
}
.swing div:nth-of-type(7) {
  background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);
  background: linear-gradient(to right, #da3b26 0%, #db412c 100%);
}
.shadow {
  clear: left;
  padding-top: 1.5em;
}
.shadow div {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  float: left;
  width: 1em;
  height: .25em;
  border-radius: 50%;
  background: #e3dbd2;
}
.shadow .shadow-l {
  background: #d5d8d6;
}
.shadow .shadow-r {
  background: #eed3ca;
}
@-webkit-keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@-webkit-keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
}
@keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0)
  }
}
@-webkit-keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.57em);
    transform: translateX(-1.75em);
  }
}
@keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.75);
    transform: translateX(-1.75em);
  }
}
@-webkit-keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.swing-l {
  -webkit-animation: ball-l .425s ease-in-out infinite alternate;
  animation: ball-l .425s ease-in-out infinite alternate;
}
.swing-r {
  -webkit-animation: ball-r .425s ease-in-out infinite alternate;
  animation: ball-r .425s ease-in-out infinite alternate;
}
.shadow-l {
  -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
  animation: shadow-l-n .425s ease-in-out infinite alternate;
}
.shadow-r {
  -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
  animation: shadow-r-n .425s ease-in-out infinite alternate;
}

15

Newton’s Cradle Loader

By: Nethan Pogi

15

Hover Effect Border

By: Nethan Pogi

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, Roboto, Arial;
  color:#0b1020;
}

.ccs-stage{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 18px 50px rgba(2,6,23,.08);
  background:#fff;
}

.ccs-story{
  width:64px;
  height:64px;
  border:0;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  position:relative;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease;
}
.ccs-story:hover{ transform:translateY(-1px); }
.ccs-story:active{ transform:translateY(0) scale(.98); }

/* Inner “photo” */
.ccs-story::before{
  content:"";
  position:absolute;
  inset:6px; /* ring thickness */
  border-radius:inherit;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(135deg, rgba(37,99,235,.35), rgba(244,63,94,.35)),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 12px 24px rgba(2,6,23,.10);
}

/* Ring layer */
.ccs-story::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(244,63,94,1), rgba(245,158,11,1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:1;
}

/* Seen vs unseen */
.ccs-story--seen::after{
  background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.12));
  opacity:1;
}

/* Subtle “unseen energy” */
.ccs-story--unseen::after{
  filter:saturate(1.05);
}
.ccs-story--unseen:hover::after{
  transform:rotate(10deg);
  transition:transform .25s ease;
}

/* Focus */
.ccs-story:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
  border-radius:999px;
}

15

Instagram Story Ring Status

By: Nethan Pogi

<div class="glitch-input-wrapper">
  <div class="input-container">
    <input
      type="text"
      id="holo-input"
      class="holo-input"
      placeholder=""
      required=""/>
    <label for="holo-input" class="input-label" data-text="ACCESS_CODE">ACCESS_CODE</label>

body {
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.glitch-input-wrapper {
  --bg-color: #0d0d0d;
  --primary-color: #00f2ea;
  --secondary-color: #a855f7;
  --text-color: #e5e5e5;
  --font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;
  --glitch-anim-duration: 0.4s;

display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 3rem;
}

/* --- Container  --- */
.input-container {
  position: relative;
  width: 19rem;
}

/* --- Input --- */
.holo-input {
  width: 100%;
  height: 3.5rem;
  background: rgba(13, 13, 13, 0.7);
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  padding: 0 1rem;
  color: var(--primary-color);
  font-family: inherit;
  font-size: 1.1rem;
  caret-color: var(--primary-color);
  z-index: 10;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* --- Floating Label --- */
.input-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--text-color);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 11;
}
.holo-input:focus + .input-label,
.holo-input:not(:placeholder-shown) + .input-label {
  top: -1.5rem;
  left: 0;
  font-size: 0.8rem;
  opacity: 1;
  color: var(--primary-color);
}

.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #212121;
}
.holo-input:focus + .input-label::before {
  color: var(--secondary-color);
  animation: glitch-label var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.holo-input:focus + .input-label::after {
  color: var(--primary-color);
  animation: glitch-label var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
}

/* --- Decorative Layers --- */
.input-border,
.input-scanline,
.input-glow,
.input-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.input-border {
  border: 1px solid rgba(0, 242, 234, 0.2);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  opacity: 0.5;
}
.corner-tl {
  top: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-bottom: none;
}
.corner-tr {
  top: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-bottom: none;
}
.corner-bl {
  bottom: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-top: none;
}
.corner-br {
  bottom: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-top: none;
}

.input-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 242, 234, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.input-scanline {
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 242, 234, 0.1) 48%,
    rgba(0, 242, 234, 0.3) 50%,
    rgba(0, 242, 234, 0.1) 52%,
    transparent 100%
  );
  opacity: 0;
}

/* --- Data Visualization --- */
.input-data-stream {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 0.3rem;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}
.stream-bar {
  flex-grow: 1;
  background-color: var(--primary-color);
  transition:
    transform 0.2s,
    opacity 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}

.holo-input:focus {
  border-color: transparent;
}
.holo-input:focus ~ .input-border {
  opacity: 1;
  border-color: rgba(0, 242, 234, 0.5);
}
.holo-input:focus ~ .input-corners .corner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 3px;
  opacity: 1;
}
.holo-input:focus ~ .input-glow {
  opacity: 1;
}
.holo-input:focus ~ .input-scanline {
  animation: scan-vertical 4s linear infinite;
}
.holo-input:focus ~ .input-data-stream {
  opacity: 1;
}
.holo-input:focus ~ .input-data-stream .stream-bar {
  animation: data-pulse 2s infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

/* --- Keyframes --- */
@keyframes glitch-label {
  0% {
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
  20% {
    transform: translate(-0.2rem, 0.1rem);
    clip-path: inset(50% 0 20% 0);
  }
  40% {
    transform: translate(0.1rem, -0.1rem);
    clip-path: inset(20% 0 60% 0);
  }
  60% {
    transform: translate(-0.15rem, 0.1rem);
    clip-path: inset(80% 0 5% 0);
  }
  80% {
    transform: translate(0.15rem, -0.15rem);
    clip-path: inset(30% 0 45% 0);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scan-vertical {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  25% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes data-pulse {
  0%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.3;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.8;
  }
}

15

All

Circular Loader

By: Nethan Pogi

Swap Text Animation

By: Nethan Pogi

Animated Tile Background

By: Nethan Pogi

Border Trace

By: Nethan Pogi

Loading Animation

By: Nethan Pogi

Pulse Animation

By: Nethan Pogi

Glass Effect Icons

By: Nethan Pogi

Card Carousel

By: Nethan Pogi

Newton’s Cradle Loader

By: Nethan Pogi

Hover Effect Border

By: Nethan Pogi

Instagram Story Ring Status

By: Nethan Pogi

CyberPunk Glitch Input

By: Nethan Pogi