Home/ Questions/Q 8226133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T15:39:33+00:00

I was inspecting the code of a website and I noticed they had an

  • 0

I was inspecting the code of a website and I noticed they had an unusual value for the background property of an element via CSS. It seems to be a gradient. Does anyone know what it is? If it is valid? And what browsers support it?

Here is the code: 

background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);

I appreciate any and all help!

Thanks in Advance! 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, first thing is to de-base64 it:

    <?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <linearGradient id="hat0" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%">
        <stop offset="0%" stop-color="#fff" stop-opacity="0.65" />
        <stop offset="100%" stop-color="#fff" stop-opacity="0.9" />
    </linearGradient>
    <rect x="0" y="0" width="100" height="100" fill="url(#hat0)" />
</svg>

    Thus you can see that yes, it is a gradient. Non-IE browsers support this, and IE 9+ supports it as well.

    • 0