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.

Emissary

Using a radial gradient you get only this: jsfiddle.net/Kyle_Sevenoaks/99dAj You may have to resort to crazy placed elements or images. – Ecliptic

It's not pure CSS, but you could create an SVG and use that as a background image. Because it's a vector image it should resize correctly depending on the size of your HTML element. – Farinaceous

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.

Particiaparticipant

for bonus points, check out version 2, with an animation :) – Particiaparticipant

The animation was the original reason for the file I had setting around. I deleted that part before posting the original code :) – Particiaparticipant

@mark-hubbert Any way to make that ellipsis or circle instead of square? – Emissary

I only regret that I have but one vote to give to your answer. – Heteronomous

@micadelli: To clip the content to a filled circle, add <mask id="m"><circle r="256" fill="white"/></mask> to the <defs> section (i.e., after </radialGradient>). Then, add the mask attribute to each of the three displayed elements (the use, use, and circle tags) like this: mask="url#m". That will clip it to a circle. – Particiaparticipant

@micadelli: further, to squish it to an ellipse, wrap those three elements with a group tag (<g>), and give it a transform attribute like this: transform="scale(1,0.75)", where 1:0.75 would be the the aspect ratio. – Particiaparticipant

hmmm. Not sure how readable that was; should I edit that into my answer? – Particiaparticipant

@MarkHubbart Already accepted but your edit to make it circle is welcome, thank you. – Emissary

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!

Debt

excellent use of pseudo elements to pull this off. Micadelli this should be the accepted answer instead of "no, here is an svg alternative" which is a great solution but not the true answer to the question. – Kick

Just FYI both the question and my original "no" answer were from 2012, when there was no well-supported pure css solution. Four years later, there was the above solution, which mostly worked! I have yet, though, to see one in pure css that looks good enough to use in production (note caveats above) – Particiaparticipant

THIS is the answer. Tremendous work! – Thanasi

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.

Ecliptic

still 2016 and...nothing. web progress is slower than governments moving to clean energy. totally unexplained. – Washhouse

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.

Particiaparticipant

Looks great but browser support is still pretty limited (e.g. FF 71 is not supporting it). caniuse.com/#search=conic-gradient(). So I wouldn't use it as FF is my browser I'm using most of the time. – Merkle

That's awesome. Thanks. – Helpless

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.

Benzol