Is Starburst effect doable in CSS3?

Question

does anybody know if the following image could be made in CSS? Light and dark lines could and should be equal width and edges fade in to darker color so that overall background would be dark color (dark blue in this case).

Any help is well appreciated. My google skills didn't provide any help on this kind of effect, only 'starburst stickers / badges kind of things' was found.

Answer 1

No. Sadly, the css3 generated image specs do not include conical/angular gradients (though they might come out in the next revision!) which would be the most likely way to do this using only css. However, you can do this using css+svg. I actually had this svg document sitting around from an experiment I did once:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Burst</title>
    <defs>
      <g id="burst">
        <g id="quad">
          <path id="ray" d="M0,0 -69,-500 69,-500 z" />
          <use xlink:href="#ray" transform="rotate(30)"/>
          <use xlink:href="#ray" transform="rotate(60)"/>
          <use xlink:href="#ray" transform="rotate(90)"/>
        </g>
        <use xlink:href="#quad" transform="rotate(120)"/>
        <use xlink:href="#quad" transform="rotate(240)"/>
      </g>
      <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" stop-color="white" stop-opacity="0.65"/>
        <stop offset="100%" stop-color="black" stop-opacity="0.65"/>
      </radialGradient>
      <!-- a circle mask -->
      <mask id="m"><circle r="256" fill="white"/></mask>
    </defs>
    <!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
    <g mask="url(#m)" transform="scale(1, 0.75)"> 
      <use xlink:href="#burst" fill="lightslateblue"/>
      <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
      <circle r="360px" fill="url(#grad)" />
    </g>
    </svg>

Set that as your background-image, and set the css background-size: cover. That's it. Here's a fiddle using this image in a data url.

Answer 2

Yes, it's possible.

But it takes some work.

I had this exact same question, and could not find any examples of this effect being done with pure CSS. And so, I decided to tinker around with it.

After a lot of experimentation, I finally came up with a solution that not only were in CSS, but also one that is rather portable (relatively speaking).

I started off with creating just the top half and the bottom half separately, using linear-gradient trickery on ::before and ::after pseudo elements, and the second step (which by far was the most time consuming step) was merging the two halves into a single element.

Working demo: http://codepen.io/pestbarn/pen/aBybeK

(the original poster wanted a vignette effect, which I've created separately in the above demo, using a div overlay with a radial gradient)

I've provided both the vanilla CSS and a Sass mixin at github.com/pestbarn/starburst.css, and you'll find some examples at the official demo page.

Is this cross-browser?

As far as I can tell, yes. You can see the current browser support in the repository.

Can I animate it?

Yes, like you would animate any other elements. Try it out for yourself!

Are there any caveats?

Alas, there is. Using two colors that are substantially different from another (e.g. in brightness) will create jagged edges. I'd therefore recommend using colors that are quite similar to one another.

Also, since the effect is created using pseudo elements, you will in some cases need to explicitly set the element's height and width.

Feel free to experiment!