Modern CSS Visual Effects: A Designer's Toolkit

/* Basic diagonal gradient */
.gradient-basic {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Multi-stop gradient */
.gradient-multi {
  background: linear-gradient(
    to right,
    #ff6b6b 0%,
    #feca57 25%,
    #48dbfb 50%,
    #ff9ff3 75%,
    #54a0ff 100%
  );
}

.radial-glow {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.8) 0%,
    transparent 60%
  ), #667eea;
}

/* Color wheel */
.conic-wheel {
  background: conic-gradient(
    from 0deg,
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Pie chart segment */
.progress-ring {
  background: conic-gradient(
    #667eea 0deg 216deg,
    #e0e0e0 216deg 360deg
  );
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* Combine multiple effects */
.enhanced-glass {
  backdrop-filter: blur(20px) brightness(1.1) contrast(0.9);
}

.blend-multiply {
  mix-blend-mode: multiply; /* Darken effect */
}

.blend-screen {
  mix-blend-mode: screen; /* Lighten effect */
}

.blend-overlay {
  mix-blend-mode: overlay; /* Contrast boost */
}

/* Duotone image effect */
.duotone-container {
  position: relative;
  background: #667eea;
}
.duotone-container img {
  mix-blend-mode: luminosity;
  filter: grayscale(100%) contrast(1.2);
}

/* Fade out edges */
.fade-edges {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Circular reveal */
.spotlight {
  mask-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    black 0%,
    transparent 50%
  );
}

/* Geometric shapes */
.clip-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clip-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Organic blob */
.clip-blob {
  clip-path: ellipse(60% 50% at 50% 50%);
  transition: clip-path 0.3s ease;
}
.clip-blob:hover {
  clip-path: ellipse(70% 60% at 50% 50%);
}

.filter-examples {
  /* Individual filters */
  filter: blur(4px);
  filter: brightness(1.2);
  filter: contrast(1.5);
  filter: grayscale(100%);
  filter: hue-rotate(90deg);
  filter: invert(100%);
  filter: saturate(2);
  filter: sepia(80%);
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
}

/* Combined filters */
.vintage-photo {
  filter: sepia(40%) contrast(1.1) brightness(1.1) saturate(0.9);
}

.neon-glow {
  filter: drop-shadow(0 0 10px #667eea) drop-shadow(0 0 40px #667eea);
}

/* Progress bar that fills as you scroll */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #667eea;
  transform-origin: left;
  animation: scale-x linear;
  animation-timeline: scroll();
}

@keyframes scale-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Element that fades in when scrolled into view */
.reveal-on-scroll {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Opt in to view transitions */
@view-transition {
  navigation: auto;
}

/* Customize the transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* Named transitions for specific elements */
.hero-image {
  view-transition-name: hero;
}

::view-transition-group(hero) {
  animation-duration: 0.5s;
}

.card {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.05) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 48px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

@supports (backdrop-filter: blur(1px)) {
  .glass { backdrop-filter: blur(20px); }
}

@supports (animation-timeline: scroll()) {
  .scroll-animated { animation-timeline: scroll(); }
}