herobannercssgradientglowlandingdesktop

Fixed-Width Hero Banner with Glow Effect

CSS Hero Banner с эффектом свечения для десктопных лендингов. Показывает арт, градиенты, тени. Идеально для промо и демонстрации.

by nLive Preview

Prompt

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>A+ Metallic Hero</title>
  <style>
    :root {
      --hero-w: 2131px;
      /* image native width */
      --hero-h: 489px;
      /* image native height */
      --bg-dark: #0b0f14;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg-dark);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero {
      width: var(--hero-w);
      height: var(--hero-h);
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: 0 30px 60px rgba(2, 6, 12, 0.6);
      background:
        radial-gradient(1200px 600px at 50% 40%, rgba(255, 255, 255, 0.02), transparent 8%),
        radial-gradient(900px 400px at 30% 50%, rgba(0, 120, 255, 0.02), transparent 6%),
        linear-gradient(180deg, rgba(10, 12, 15, 1) 0%, rgba(21, 23, 27, 1) 100%);
    }

    .art {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .art img {
      display: block;
      width: auto;
      height: 420px;
      filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7));
      user-select: none;
      -webkit-user-drag: none;
    }

    .glow {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1100px;
      height: 420px;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      background: radial-gradient(closest-side, rgba(120, 140, 255, 0.06), rgba(120, 70, 180, 0.02) 35%, transparent 60%);
      filter: blur(30px);
      opacity: 0.9;
    }

    .note {
      position: absolute;
      right: 12px;
      bottom: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      background: rgba(0, 0, 0, 0.18);
      padding: 6px 8px;
      border-radius: 6px;
      backdrop-filter: blur(4px);
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="hero" role="img" aria-label="A plus metallic artwork">
      <div class="art">
        <img src="https://i.imgur.com/Bmg72zs.png" alt="A+ metallic artwork">
      </div>

      <div class="glow" aria-hidden="true"></div>

      <div class="note">Fixed desktop layout — A+ metallic image visible.</div>
    </div>
  </div>
</body>

</html>

All Prompts