CSS Showcase

A collection of CSS ideas, experiments, and techniques

Animated Gradient

Smooth gradient background animation using CSS keyframes

.gradient-animated {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Glowing Button

Neon glow effect on hover using box-shadow

.glow-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: #0f0f0f;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.glow-btn:hover {
  box-shadow: 0 0 20px #6366f1, 0 0 40px #6366f1;
}

Tilt Effect

3D Card Tilt

Perspective transform on hover for 3D depth

.card-tilt {
  perspective: 1000px;
}

.card-tilt:hover {
  transform: rotateY(15deg) rotateX(10deg);
  transition: transform 0.3s ease;
}

Custom Spinner

Pure CSS loading animation

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #27272a;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Hover Me

Text Reveal

Gradient text animation on hover

.text-reveal {
  background: linear-gradient(90deg, #6366f1, #818cf8);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% auto;
  transition: 0.5s;
}

.text-reveal:hover {
  background-position: right;
}

Glass

Glass morphism

Glass Morphism

Backdrop blur with semi-transparent background

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
}

Hover underline

Animated Underline

Expand underline from center on hover

.underline-link {
  position: relative;
}

.underline-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #6366f1;
  transition: 0.3s ease;
  transform: translateX(-50%);
}

.underline-link:hover::after {
  width: 100%;
}

Pulse Animation

Continuous pulse effect for notifications

.pulse-dot {
  width: 20px;
  height: 20px;
  background: #6366f1;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

Add Your Own

Create a new Vue component in src/components/css-showcase/ and add it to the demos array