skeumorphic gradients

skeumorphicgradient.css

/* Sky gradient with border glow effect - reusable for buttons, tabs, cards */
.sky-gradient-glow {
  position: relative;
  background: linear-gradient(to bottom, rgb(125, 211, 252), rgb(14, 165, 233));
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 188, 255, 0.3);
}

.sky-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(125, 211, 252),
    rgb(56, 189, 248),
    rgb(14, 165, 233)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
  pointer-events: none;
}

.sky-gradient-glow:hover {
  box-shadow: 0 12px 30px rgba(0, 188, 255, 0.4);
}

.sky-gradient-glow:active {
  box-shadow: 0 8px 20px rgba(0, 188, 255, 0.25);
}

/* White/Neutral gradient with border glow effect */
.white-gradient-glow {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(243, 244, 246),
    rgb(229, 231, 235)
  );
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgb(209, 213, 219);
}

.white-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(243, 244, 246),
    rgb(255, 255, 255),
    rgb(229, 231, 235)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.3);
  pointer-events: none;
}

.white-gradient-glow:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.white-gradient-glow:active {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Purple gradient with border glow effect */
.purple-gradient-glow {
  position: relative;
  background: linear-gradient(to bottom, rgb(196, 181, 253), rgb(139, 92, 246));
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.purple-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(196, 181, 253),
    rgb(167, 139, 250),
    rgb(139, 92, 246)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4);
  pointer-events: none;
}

.purple-gradient-glow:hover {
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
}

.purple-gradient-glow:active {
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
}

/* Rose/Red gradient with border glow effect */
.rose-gradient-glow {
  position: relative;
  background: linear-gradient(to bottom, rgb(251, 113, 133), rgb(244, 63, 94));
  box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3);
  transition: all 0.3s ease;
}

.rose-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(251, 113, 133),
    rgb(251, 207, 232),
    rgb(244, 63, 94)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.4);
  pointer-events: none;
}

.rose-gradient-glow:hover {
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.4);
}

.rose-gradient-glow:active {
  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.25);
}

/* Black/Dark gradient with border glow effect */
.black-gradient-glow {
  position: relative;
  background: linear-gradient(to bottom, rgb(71, 85, 105), rgb(15, 23, 42));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.black-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(71, 85, 105),
    rgb(100, 116, 139),
    rgb(15, 23, 42)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.5);
  pointer-events: none;
}

.black-gradient-glow:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.black-gradient-glow:active {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.light-white-gradient-glow {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(251, 238, 255)
  );
  box-shadow: 0 10px 25px rgba(155, 6, 255, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgb(246, 224, 255);
}

.light-white-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(247, 240, 250),
    rgb(242, 217, 250),
    rgb(252, 243, 255)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(112, 51, 255, 1);
  pointer-events: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary;
  border-radius: 4px;
}

.scrolldiv {
  margin-top: 50vh;
  margin-bottom: 50vh;
}

.light-sky-gradient-glow {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(198, 237, 255)
  );
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 188, 255, 0.1);
}

.light-sky-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(207, 240, 255),
    rgb(165, 228, 255),
    rgb(192, 235, 255)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 1);
  pointer-events: none;
}

.light-rose-gradient-glow {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(255, 198, 228)
  );
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(255, 0, 132, 0.1);
}

.light-rose-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(255, 207, 233),
    rgb(255, 165, 211),
    rgb(255, 192, 225)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgb(248, 56, 165);
  pointer-events: none;
}

.light-purple-gradient-glow {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(247, 228, 255)
  );
  transition: all 0.3s ease;
}

.light-purple-gradient-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(
    to top,
    rgb(255, 255, 255),
    rgb(245, 227, 255),
    rgb(246, 231, 255)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}