21

I want to have inner glow effect of button when focused. I could achieve outline (outer) glow of button but I even want to have inner glow effect. Could anyone help?

rmtheis
  • 5,992
  • 12
  • 61
  • 78
rashmi
  • 599
  • 4
  • 10
  • 19
  • Maybe have a look here: http://stackoverflow.com/questions/2572713/css3-gradients-to-reproduce-an-inner-glow-effect-from-illustrator-with-border-r – Simon Jan 07 '11 at 11:37

2 Answers2

40

I made a jsFiddle showing this effect:

a {
    -webkit-box-shadow: inset 0 0 30px #00f;
    -moz-box-shadow: inset 0 0 30px #00f;
    box-shadow: inset 0 0 30px #00f;
}

Edit: in response to your comment: Here's a much sexier version.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • i get inner glow effect with this thanks for your help. as i already mentioned i need to have both inner glow and outer glow together.if i include " -webkit-box-shadow: inset 0 0 30px #00f;" along with -webkit-box-shadow: 0 0 30px #00f;i can only see inner glow but not outer glow. – rashmi Jan 10 '11 at 04:45
  • ha ha ha, is this sexier version? ;) – Kamlesh Aug 03 '19 at 08:41
  • 2022 and "-moz-box-shadow" will give you a warning in FireFox 'Unknown property ‘-moz-box-shadow’. Declaration dropped.' Seems Chrome doesn't mind though. – Shaedo Mar 06 '22 at 17:43
3

use box-shadow inset: 

.class{
  box-shadow:inset 2px 2px 2px 2px black;
}

http://www.css3.info/preview/box-shadow/

crodjer
  • 13,384
  • 9
  • 38
  • 52
  • +1, but you need the `-webkit-` and the `-moz-` duplicate styles. – thirtydot Jan 07 '11 at 11:47
  • 1
    yeah thats why provided the css3.info linke. CSS3 work is still under progress, yet the features like `box-shadow`, `border-radius` are implemented by major browsers (I don't consider IE as a browser) – crodjer Jan 07 '11 at 11:54
  • Does anyone consider **that** thing a browser? –  Mar 21 '18 at 17:11