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 mergin 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!

Answer 3

There is an experimental property in a draft for CSS4 by Lea Verou:

div
{
    repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}

But as far as I understand, this is just a proposal and is not possible in CSS3 alone. Just stick with a background image, or you could try using triangle images in rotated elements.

Answer 4

With the addition of conic-gradient() to the CSS spec, it is now possible to create the effect using CSS that is intended for that type of effect.

Essentially, you'll set gradient stops like this:

background-image: conic-gradient( circle,
  black 0%,  black 5%,
  white 5%,  white 10%,
  black 10%, black 15%,
  ...
);

Here's a working fiddle

And here's an animated version :-) The animation is a bit choppy on my browser, though. It could maybe be optimized a bit.

Note that this only works in WebKit browsers; that is, Chrome and Safari. But honestly, that covers the lion's share of users, and I'm sure the rest will add support for it soon enough.

Answer 5

There is currently a better solution than the "conic-gradient ()" method to extend the "marcus erronius" answer. There is a repeating-conic-gradient, which creates an image consisting of a repeating gradient.

div {
  height: 500px;
  background: repeating-conic-gradient(
    hsl(0deg 0% 80% / 31%) 0deg 15deg,
    hsla(0,0%,100%,0) 0deg 30deg
  ) #3c1c32
}

<div></div>

You read more about it at W3 CSS Image Values.
This property is not compatible with all browsers. Check caniuse for more information.