Search code examples
csssass

scss box shadow light up effect

I'm not that good with all the properties of box shadow so I'd like to know how to do this bottom light effect for a navbar

bottom light effect

So far mines looks like this my navbar

my current scss code:

.navbar {
  border: 1px solid black;
  border-bottom: 1px solid #b7bdbd;
  grid-column: 1 / -1;
  grid-row: 1;
  background: #262727;
  background: -moz-linear-gradient(left, #262727 0%, #505050 50%, #262727 100%);
  background: -webkit-linear-gradient(
    left,
    #262727 0%,
    #505050 50%,
    #262727 100%
  );
  background: linear-gradient(to right, #262727 0%, #505050 50%, #262727 100%);
  box-shadow: 0 4px 2px -2px rgb(169, 169, 169);
}
Solution

  • You can layer multiple box-shaddows with each one being softer than the previous one to create a more natural fade to the glow.

    If only two values are given, they are interpreted as offset-x and offset-y values.

    If a third value is given, it is interpreted as a blur-radius.

    If a fourth value is given, it is interpreted as a spread-radius.

    You also need to lower the opacity of the color to help it blend into the background.

    .navbar {
  text-align: center;
  padding: 2px;
  border: 1px solid black;
  border-bottom: 1px solid rgba(200, 200, 200, 0.5);
  grid-column: 1 / -1;
  grid-row: 1;
  background: #262727;
  background: -moz-linear-gradient(left, #262727 0%, #505050 50%, #262727 100%);
  background: -webkit-linear-gradient(
    left,
    #262727 0%,
    #505050 50%,
    #262727 100%
  );
  background: linear-gradient(to right, #262727 0%, #505050 50%, #262727 100%); 
  box-shadow: 
  0px 4px 2px -2px rgba(200, 200, 200, 0.4), 
  0px 10px 5px -5px rgba(200, 200, 200, 0.3), 
  0px 20px 10px -10px rgba(200, 200, 200, 0.2), 
  0px 40px 20px -20px rgba(200, 200, 200, 0.1);
}

body {
  background: #262727;
}
    <div class="navbar">Text</div>