Подскажите как сверстать?
Да можно смотреть в сторону градиентов и transform


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg whdth="600" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <radialGradient id="g1" cx="55%" cy="45%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:hsl(190,50%,50%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </radialGradient>
        <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,30%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,100%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </linearGradient>
        <linearGradient id="g3" x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,30%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,100%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </linearGradient>
        <rect id="layer1" width="600" height="500" fill="url(#g1)"/>
        <rect id="layer2" width="600" height="500" fill="url(#g2)"/>
        <rect id="layer3" width="600" height="500" fill="url(#g3)"/>
        <filter id="f1" x="0" y="0">
            <feImage result="op1" xlink:href="#layer1"/>
            <feImage result="op2" xlink:href="#layer2"/>
            <feImage result="op3" xlink:href="#layer3"/>
            <feBlend mode="multiply" in="op1" in2="op2" result="op12"/>
            <feBlend mode="multiply" in="op12" in2="op3"/>
        </filter>
    </defs>
    <rect width="500" height="500" filter="url(#f1)"/>
    <text font-size="28" x="20" y="100" width="500" style="stroke:none;fill:white">
       Может, не надо рисовать картинки на CSS?
    </text>
    <text font-size="40" x="20" y="400" width="500" style="stroke:none;fill:white">
        Для этого ведь создан SVG.
    </text>
</svg>
