title: Generalizable etched line effect with CSS?
body: <p>I'd like to develop a generalizable solution for creating etched lines. The goal is to be able to not have to manually pick closely related colors for every color scheme where I want etching. The issue seems that the color of the indented part in relation to the color of the background is somewhat critical for creating the 3 dimensional effect.</p>
  
  <p><a href="http://instagram.com/p/Omjwtpxm_O/" rel="nofollow noreferrer">Below is an example in blue (the lines above the comment bubble/underneath the number "11")</a>. I think I need to use <code>box-shadow</code> but not sure if this is the best way.</p>
  
  <p>If box-shadow is what I should use, does anyone know how to set its CSS values such that would would work for say a gray line would also work for say a blue line?</p>
  
  <p><img src="https://i.stack.imgur.com/Kz1n8.png" alt="enter image description here"></p>