Efeito de borda azul elétrico CSS

Abrir no Editor Video Publique Seu Código

Recomendado

4 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blue Electric Border</title>
  <style>
    /* Reset and base styles */

/* CSS Variables */
    :root {
      --border-color: #4a9eff;
      --light-color: oklch(from var(--border-color) l c h);
      --gradient-color: oklch(
        from var(--border-color) 0.3 calc(c / 2) h / 0.4
      );
      --neutral-900: oklch(0.185 0 0);
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: system-ui, -apple-system, sans-serif;
      background-color: oklch(0.145 0 0);
      color: oklch(0.985 0 0);
      height: 100vh;
      overflow: hidden;
    }

/* Main container */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

/* SVG positioning */
    .svg {
      position: absolute;
    }

/* 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(74, 158, 255, 0.5);
      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(74, 158, 255, 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>

Efeito de borda azul elétrico CSS

Recomendado

Mensagem de motivação

Um código por cloudcodes

Tempestade Elétrica

HTML

CSS

JS

Recomendado

Mensagem de motivação

Um código por cloudcodes

Tempestade Elétrica

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS