Home/ Questions/Q 9016927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T04:07:54+00:00

does anybody know if the following image could be made in CSS? Light and

  • 0

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.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0