0

Here's an example of the image I'm using to give a div on my website a radial gradient 'white glow' effect.

enter image description here

Currently that image is set as the div background - it's about 338KB big and that's unacceptable in web terms. It's incredibly large!

Assuming my div has something like:

.my-div {
    background-color: darkblue;
}

Can I apply a radial background to overlay this white color on top of that to achieve a similar effect?

I do not intend to support IE9 and lower, so anything that works on modern browsers and modern mobile browsers is A-OK for my use cases.

sergserg
  • 21,716
  • 41
  • 129
  • 182

2 Answers2

4

Try colorzilla. Here is an example of radial gradient made with CSS3

http://jsfiddle.net/JRUnr/73/

thenewseattle
  • 1,451
  • 1
  • 13
  • 17
  • Thank you for your help. I'll compare this working result with my previous attempts and figure out where I went wrong. – sergserg Nov 24 '13 at 04:52
0

You can create CSS gradients in a simple manner as shown below, if you are designing only for modern browsers.

.block {
  width: 400px;
  height: 300px;
}

.gradient {
  background: rgb(56,68,75);
  background: radial-gradient(circle, rgba(56,68,75,1) 0%, rgba(35,43,48,1) 100%); 
}
<div class="gradient block"></div>
Coola
  • 2,934
  • 2
  • 19
  • 43