इलेक्ट्रिक फ्रेम नीला

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

9 December 2025

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

HTML

<!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: #4afff3;
      --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, 255, 243, 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(74, 255, 243, 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>

इलेक्ट्रिक फ्रेम नीला

अनुशंसित

हरे रंग का विद्युत फ्रेम

इलेक्ट्रिक स्टॉर्म

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

HTML

CSS

JS

अनुशंसित

हरे रंग का विद्युत फ्रेम

इलेक्ट्रिक स्टॉर्म

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS