Efecto de borde eléctrico amarillo CSS

320 Skyrreum

Abrir en el editor Video Publica tu código

Recomendado

26 December 2025

Plantilla de formulario de inicio de sesión HTML para redes sociales

25 June 2025

Un código de Mete

8 November 2025

Ejemplo de código de calculadora HTML simple

HTML

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

/* CSS Variables */
    :root {
      --border-color: #ffe74a;
      --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(255, 231, 74, 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(255, 231, 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>

Recomendado

Plantilla de formulario de inicio de sesión HTML para redes sociales

Un código de Mete

Ejemplo de código de calculadora HTML simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS