Cadre électrique vert

Open In Editor Publish Your Code

/* Card container */
    .card {
      padding: 2px;
      border-radius: 24px;
      position: relative;
      background: linear-gradient(
          -30deg,
          var(--gradient-color),
          transparent,
          var(--gradient-color)
        ),
        linear-gradient(
          to bottom,
          var(--neutral-900),
          var(--neutral-900)
        );
    }

/* Inner container */
    .inner {
      position: relative;
    }

/* Border layers */
    .border {
      border: 2px solid rgba(98, 255, 74, 0.6);
      border-radius: 24px;
      padding-right: 4px;
      padding-bottom: 4px;
    }

.main {
      width: 350px;
      height: 500px;
      border-radius: 24px;
      border: 2px solid var(--border-color);
      margin-top: -4px;
      margin-left: -4px;
      filter: url(#turbulent-displace);
    }

/* Glow effects */
    .glow-1 {
      border: 2px solid rgba(98, 255, 74, 0.6);
      border-radius: 24px;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(1px);
    }

.glow-2 {
      border: 2px solid var(--light-color);
      border-radius: 24px;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(4px);
    }

/* Overlay effects */
    .overlay-1 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 24px;
      opacity: 1;
      mix-blend-mode: overlay;
      transform: scale(1.1);
      filter: blur(16px);
      background: linear-gradient(
        -30deg,
        white,
        transparent 30%,
        transparent 70%,
        white
      );
    }

.overlay-2 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 24px;
      opacity: 0.5;
      mix-blend-mode: overlay;
      transform: scale(1.1);
      filter: blur(16px);
      background: linear-gradient(
        -30deg,
        white,
        transparent 30%,
        transparent 70%,
        white
      );
    }

/* Background glow */
    .bg-glow {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 24px;
      filter: blur(32px);
      transform: scale(1.1);
      opacity: 0.3;
      z-index: -1;
      background: linear-gradient(
        -30deg,
        var(--light-color),
        transparent,
        var(--border-color)
      );
    }

/* Content container */
    .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

/* Content sections */
    .top {
      display: flex;
      flex-direction: column;
      padding: 48px;
      padding-bottom: 16px;
      height: 100%;
    }

.bottom {
      display: flex;
      flex-direction: column;
      padding: 48px;
      padding-top: 16px;
    }

/* Scrollbar glass component */
    .glass {
      background: radial-gradient(
          47.2% 50% at 50.39% 88.37%,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        rgba(255, 255, 255, 0.04);
      position: relative;
      transition: background 0.3s ease;
      border-radius: 14px;
      width: fit-content;
      height: fit-content;
      padding: 8px 16px;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }

.glass:hover {
      background: radial-gradient(
          47.2% 50% at 50.39% 88.37%,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        rgba(255, 255, 255, 0.08);
    }

.glass::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1px;
      background: linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.48) 16.73%,
        rgba(255, 255, 255, 0.08) 30.2%,
        rgba(255, 255, 255, 0.08) 68.2%,
        rgba(255, 255, 255, 0.6) 81.89%
      );
      border-radius: inherit;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: xor;
      -webkit-mask-composite: xor;
      pointer-events: none;
    }

/* Typography */
    .title {
      font-size: 36px;
      font-weight: 500;
      margin-top: auto;
    }

.description {
      opacity: 0.5;
    }

/* Divider */
    .divider {
      margin-top: auto;
      border: none;
      height: 1px;
      background-color: currentColor;
      opacity: 0.1;
      mask-image: linear-gradient(to right, transparent, black, transparent);
      -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black,
        transparent
      );
    }
  </style>
</head>
<body>
  <main class="container">
    <svg class="svg">
      <defs>
        <filter id="turbulent-displace" colorInterpolationFilters="sRGB" x="-20%" y="-20%" width="140%" height="140%">
          <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="1" />
          <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
            <animate attributeName="dy" values="700; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
          </feOffset>
          <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="1" />
          <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
            <animate attributeName="dy" values="0; -700" dur="6s" repeatCount="indefinite" calcMode="linear" />
          </feOffset>
          <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="2" />
          <feOffset in="noise1" dx="0" dy="0" result="offsetNoise3">
            <animate attributeName="dx" values="490; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
          </feOffset>
          <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="2" />
          <feOffset in="noise2" dx="0" dy="0" result="offsetNoise4">
            <animate attributeName="dx" values="0; -490" dur="6s" repeatCount="indefinite" calcMode="linear" />
          </feOffset>
          <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
          <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
          <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />
          <feDisplacementMap in="SourceGraphic" in2="combinedNoise" scale="30" xChannelSelector="R" yChannelSelector="B" />
        </filter>
      </defs>
    </svg>
    <div class="card">
      <div class="inner">
        <div class="border">
          <div class="main"></div>
        </div>
        <div class="glow-1"></div>
        <div class="glow-2"></div>
      </div>
      <div class="overlay-1"></div>
      <div class="overlay-2"></div>
      <div class="bg-glow"></div>
      <div class="content">
        <div class="top">
          <div class="glass">
            Dramatic
          </div>
          <p class="title">Electric Border</p>
        </div>
        <hr class="divider" />
        <div class="bottom">
          <p class="description">In case you'd like to emphasize something very dramatically.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

Cadre électrique vert

Recommended

Draggable Vertical Rectangles HTML

Cadre électrique jaune

Cadre électrique rouge

HTML

CSS

JS

Recommended

Draggable Vertical Rectangles HTML

Cadre électrique jaune

Cadre électrique rouge

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS