<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Gradient Definitions -->
  <defs>
    <!-- Purple Dream Gradient -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>

    <!-- Ocean Blue Gradient -->
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#2E3192;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#1BFFFF;stop-opacity:1" />
    </linearGradient>

    <!-- Sunset Gradient -->
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#feca57;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ee5a6f;stop-opacity:1" />
    </linearGradient>

    <!-- Radial Gradient -->
    <radialGradient id="grad4" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#f12711;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f5af19;stop-opacity:1" />
    </radialGradient>
  </defs>

  <!-- Main gradient display boxes -->
  <g transform="translate(50, 50)">
    <!-- Top left - Linear gradient 1 -->
    <rect x="0" y="0" width="130" height="130" rx="12" fill="url(#grad1)" stroke="#1f2937" stroke-width="2"/>

    <!-- Top right - Linear gradient 2 -->
    <rect x="170" y="0" width="130" height="130" rx="12" fill="url(#grad2)" stroke="#1f2937" stroke-width="2"/>

    <!-- Bottom left - Linear gradient 3 -->
    <rect x="0" y="170" width="130" height="130" rx="12" fill="url(#grad3)" stroke="#1f2937" stroke-width="2"/>

    <!-- Bottom right - Radial gradient -->
    <rect x="170" y="170" width="130" height="130" rx="12" fill="url(#grad4)" stroke="#1f2937" stroke-width="2"/>
  </g>

  <!-- Control panel representation -->
  <g transform="translate(30, 330)">
    <!-- Color stop indicators -->
    <circle cx="20" cy="0" r="8" fill="#667eea" stroke="white" stroke-width="2"/>
    <circle cx="70" cy="0" r="8" fill="#764ba2" stroke="white" stroke-width="2"/>
    <line x1="20" y1="0" x2="70" y2="0" stroke="#3b82f6" stroke-width="2"/>

    <circle cx="130" cy="0" r="8" fill="#2E3192" stroke="white" stroke-width="2"/>
    <circle cx="180" cy="0" r="8" fill="#1BFFFF" stroke="white" stroke-width="2"/>
    <line x1="130" y1="0" x2="180" y2="0" stroke="#3b82f6" stroke-width="2"/>

    <circle cx="240" cy="0" r="8" fill="#ff6b6b" stroke="white" stroke-width="2"/>
    <circle cx="290" cy="0" r="8" fill="#feca57" stroke="white" stroke-width="2"/>
    <circle cx="340" cy="0" r="8" fill="#ee5a6f" stroke="white" stroke-width="2"/>
    <line x1="240" y1="0" x2="340" y2="0" stroke="#3b82f6" stroke-width="2"/>
  </g>

  <!-- Angle indicator (top right corner) -->
  <g transform="translate(340, 30)">
    <circle cx="0" cy="0" r="25" fill="white" stroke="#3b82f6" stroke-width="2"/>
    <line x1="0" y1="0" x2="0" y2="-18" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    <line x1="0" y1="0" x2="13" y2="-13" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
    <text x="0" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#6b7280">45°</text>
  </g>

  <!-- Bottom label -->
  <text x="200" y="385" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#6b7280">CSS Gradient Generator</text>
</svg>
