10
Finally finished my neon sign CSS art after 6 tries
Had to pick between using box-shadow layers or clip-path for the glow effect on my neon sign piece. Went with box-shadow in the end because it gave me that soft fade without weird jagged edges. How do you guys handle glow effects in pure CSS?
2 comments
Log in to join the discussion
Log In2 Comments
gavinwood6h ago
That glow you get from neon tubes in real life is actually a whole different beast than anyone talks about. My cousin owns a sign shop and I watched him hand bend letters for months before he even touched a power supply. The glass itself has this weird property where it looks dead in daylight but once the gas starts flowing it hits different. Box-shadow does capture that soft diffusion better than clip-path in my experience, but you gotta layer it right. Maybe three shadows stacked with decreasing opacity and increasing spread will get you closer to the real thing.
8
morgan_jenkins908h ago
Nah you went the wrong way with box-shadow tbh. clip-path gives way sharper lines that actually look like neon tubes, not just a blurry mess. Box-shadow always bleeds too much into the surrounding area and kills the crisp tube look. Plus if you stack enough clip-path layers with different offsets you get that fake 3D depth that makes it pop like real glass. The jagged edges thing is just a matter of adjusting your polygon points more carefully, not a reason to ditch the whole approach.
2