* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

background: #f5f5f3;
}

/* ===================================
   BULB
=================================== */

.bulb {
  position: relative;

width: 280px;
  height: 500px;
}

/* ===================================
   AMBIENT GLOW
=================================== */

.glow {
  position: absolute;

width: 310px;
  height: 340px;

left: 50%;
  top: 20px;

transform: translateX(-50%);

border-radius: 50%;

background:
    radial-gradient(
      circle,
      rgba(255, 220, 80, 0.35),
      rgba(255, 165, 20, 0.13) 45%,
      transparent 72%
    );

filter: blur(22px);
}

/* ===================================
   GLASS ENVELOPE
=================================== */

.glass {
  position: absolute;

top: 10px;
  left: 50%;

width: 245px;
  height: 350px;

transform: translateX(-50%);

/*
    Large round top narrowing
    into the bulb neck.
  */

border-radius:
    50% 50% 42% 42% /
    42% 42% 58% 58%;

background:

radial-gradient(
      ellipse at 38% 20%,
      rgba(255,255,255,0.75),
      transparent 18%
    ),

radial-gradient(
      ellipse at center,
      rgba(255,245,170,0.96) 0%,
      rgba(255,211,76,0.87) 45%,
      rgba(255,157,20,0.68) 75%,
      rgba(255,130,5,0.35) 100%
    );

border:
    3px solid
    rgba(225, 116, 0, 0.75);

box-shadow:

inset 10px 5px 25px
      rgba(255,255,255,0.45),

inset -12px -5px 25px
      rgba(230,110,0,0.22),

0 0 20px
      rgba(255,185,35,0.32),

0 0 65px
      rgba(255,175,30,0.18);

overflow: hidden;
}

/* ===================================
   GLASS HIGHLIGHT
=================================== */

.glass-highlight {
  position: absolute;

top: 34px;
  left: 28px;

width: 34px;
  height: 180px;

border-radius: 50%;

transform: rotate(15deg);

background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.38),
      transparent
    );

filter: blur(3px);
}

/* ===================================
   FILAMENTS
=================================== */

.filaments {
  position: absolute;

left: 50%;
  top: 92px;

width: 100px;
  height: 150px;

transform: translateX(-50%);
}

.filament {
  position: absolute;

left: 50%;
  top: 0;

width: 8px;
  height: 150px;

border-radius: 10px;

background:
    linear-gradient(
      to bottom,
      #ffffff,
      #fffbe0,
      #ffffff
    );

box-shadow:

0 0 4px #ffffff,

0 0 10px #fff8b0,

0 0 20px #ffd740,

0 0 35px
      rgba(255,180,20,0.75);

transform-origin: center;
}

/* crossed filament layout */

.f1 {
  transform:
    translateX(-50%)
    rotate(20deg);
}

.f2 {
  transform:
    translateX(-50%)
    rotate(-20deg);
}

.f3 {
  height: 125px;

top: 12px;

transform:
    translateX(-50%);
}

/* ===================================
   SUPPORT WIRES
=================================== */

.supports {
  position: absolute;

left: 50%;
  top: 205px;

width: 70px;
  height: 100px;

transform: translateX(-50%);
}

.supports span {
  position: absolute;

bottom: 0;

width: 2px;
  height: 95px;

background:
    linear-gradient(
      #c06d13,
      #54300f
    );
}

.supports span:nth-child(1) {
  left: 20px;

transform:
    rotate(-5deg);
}

.supports span:nth-child(2) {
  left: 34px;
}

.supports span:nth-child(3) {
  right: 20px;

transform:
    rotate(5deg);
}

/* ===================================
   INTERNAL GLASS STEM
=================================== */

.stem {
  position: absolute;

left: 50%;
  bottom: 5px;

width: 36px;
  height: 100px;

transform: translateX(-50%);

border-radius:
    50% 50% 10px 10px;

background:
    linear-gradient(
      90deg,
      rgba(255,180,50,0.25),
      rgba(255,255,220,0.60),
      rgba(255,160,30,0.25)
    );

border:
    1px solid
    rgba(130,75,15,0.35);
}

/* ===================================
   NECK
=================================== */

.neck {
  position: absolute;

z-index: 3;

top: 328px;
  left: 50%;

width: 94px;
  height: 38px;

transform: translateX(-50%);

border-radius:
    0 0 12px 12px;

background:
    linear-gradient(
      90deg,
      #8b5a24,
      #d8b26d,
      #7b4a1d
    );

box-shadow:
    0 -5px 8px
    rgba(80,40,10,0.35);
}

/* ===================================
   METAL SCREW BASE
=================================== */

.metal-base {
  position: absolute;

z-index: 4;

left: 50%;
  top: 355px;

width: 100px;
  height: 105px;

transform: translateX(-50%);

border-radius:
    5px 5px 25px 25px;

background:

linear-gradient(
      90deg,

#454545 0%,

#e6e6e6 13%,

#777 25%,

#f7f7f7 43%,

#777 60%,

#eeeeee 78%,

#444 100%
    );

border:
    1px solid #666;

box-shadow:

inset 8px 0 8px
      rgba(255,255,255,0.25),

inset -8px 0 8px
      rgba(0,0,0,0.25),

0 5px 10px
      rgba(0,0,0,0.22);
}

/* ===================================
   SCREW RIDGES
=================================== */

.ridge {
  position: relative;

width: 108px;
  height: 9px;

left: -5px;

margin-top: 9px;

border-radius: 50%;

background:

linear-gradient(
      to bottom,
      #eeeeee,
      #555 45%,
      #f3f3f3 75%,
      #666
    );

box-shadow:
    0 2px 2px
    rgba(0,0,0,0.3);
}

/* ===================================
   BOTTOM CONTACT
=================================== */

.contact {
  position: absolute;

z-index: 5;

left: 50%;
  top: 451px;

width: 52px;
  height: 28px;

transform: translateX(-50%);

border-radius:
    5px 5px 50% 50%;

background:
    linear-gradient(
      90deg,
      #555,
      #e5e5e5,
      #555
    );

border:
    1px solid #555;
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground