← Lessons BUILDER PATH

🚀 Neon Sign Studio

Lesson 35
✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ 🚀
Themed Universe
Space Command
Deep space, neon lights — today YOU paint a glowing neon sign using CSS gradients and glow! 💫

🚀 What we're MAKING today: My Neon Sign

In Hello Colors you learned that colors have names and hex codes. In Poster Studio you styled text. In Spinning Sticker you used transforms. Today you learn the CSS superpower that turns two colors into a smooth blend: linear-gradient 🌈

What's a gradient? It's a smooth transition from one color to another — like a sunset, a nebula, or a neon light. You pick two colors and a direction, and CSS blends them automatically. Then you add a glow with box-shadow — tiny code, BIG effect!

🔗 Remember hex colors from Lesson 1? A gradient uses TWO colors! Instead of one color, you blend two together to make something brand new!
🎯 Missions Day ✦
…
…
…
● ● ● neon-sign.css CSS 

  


  
  

    

      neon preview
      LIVE
    

    

  








  

    

      
🚀 Space Command Step 1 of 5

      
…

    

  

  

    
    
    
    
  

  

    💡 Hint: …
  







  

    
🚀 Neon Sign Studio

    
In Hello Colors you learned about hex codes like #ff6b6b. Today you learn something MAGICAL: CSS gradients blend TWO colors into a smooth transition — like a sunset, a nebula, or a neon light!

    

      
🎬 CSS Gradient Toolkit

      
background: linear-gradient(180deg, /* direction */

      
  #ff6b6b, /* top color */

      
  #7c3aed /* bottom color */

      
);

      
box-shadow: 0 0 12px #a855f7; /* glow! */

      
linear-gradient = color blend. box-shadow = outer glow. Simple!

    

    

      
🎨linear-gradient blends two colors: background: linear-gradient(direction, color1, color2)

      
💡box-shadow creates a glow: box-shadow: 0 0 size color — third number = glow spread!

      
✏️Edit the gold boxes in the code → the neon sign updates live! Hit ✓ Check after each step.