Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Watercolor Gradient Effect</title>
    <style>
        /* Base Page Styles */
        body {
            margin: 0;
            padding: 0;
            background-color: #fdfdfd;
            /* Simple dot pattern background like the reference image */
            background-image: radial-gradient(#ccc 1px, transparent 1px);
            background-size: 20px 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .container {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 40px;
            padding: 50px;
        }

        /* CORE WATERCOLOR TECHNIQUE
           1. We create a base gradient.
           2. We add 'blobs' using pseudo-elements to vary the color density.
           3. We apply an SVG filter (defined in HTML) to distort the edges.
        */

        .watercolor-strip {
            position: relative;
            width: 500px;
            height: 120px;
            border-radius: 20px; /* Soft corners */

            /* The SVG Filter is what gives it the 'wet' bleeding edge */
            filter: url(#watercolor-distortion);

            /* Mix blend mode helps it look like dye on paper */
            mix-blend-mode: multiply;
            opacity: 0.9;
        }

        /* --- TOP STRIP: Deep Blue to Dark Red --- */
        .strip-1 {
            /* Base horizontal flow */
            background: linear-gradient(90deg,
                rgba(53, 46, 126, 0.9) 0%,
                rgba(80, 40, 100, 0.85) 40%,
                rgba(109, 24, 24, 0.9) 100%
            );
            box-shadow: 0 4px 15px rgba(53, 46, 126, 0.3);
        }

        /* Internal blobs to make it look less like a computer gradient */
        .strip-1::before {
            content: '';
            position: absolute;
            top: -10px; left: 10px; right: 30%; bottom: -5px;
            background: radial-gradient(circle at 30% 50%, rgba(53, 46, 126, 0.8), transparent 60%);
            filter: blur(10px);
            border-radius: 50%;
        }
        .strip-1::after {
            content: '';
            position: absolute;
            top: 5px; left: 40%; right: -10px; bottom: 0px;
            background: radial-gradient(circle at 70% 50%, rgba(140, 30, 30, 0.6), transparent 50%);
            filter: blur(15px);
            border-radius: 50%;
        }

        /* --- BOTTOM STRIP: Terracotta to Deep Purple --- */
        .strip-2 {
            background: linear-gradient(90deg,
                rgba(166, 61, 51, 0.9) 5%,
                rgba(150, 50, 60, 0.85) 45%,
                rgba(69, 34, 73, 0.95) 100%
            );
            box-shadow: 0 4px 15px rgba(166, 61, 51, 0.3);
        }

        .strip-2::before {
            content: '';
            position: absolute;
            top: -5px; left: -5px; right: 50%; bottom: 5px;
            background: radial-gradient(circle at 40% 50%, rgba(180, 70, 60, 0.7), transparent 70%);
            filter: blur(8px);
        }
        .strip-2::after {
            content: '';
            position: absolute;
            top: 10px; left: 50%; right: -5px; bottom: -10px;
            background: radial-gradient(circle at 60% 60%, rgba(69, 34, 73, 0.8), transparent 60%);
            filter: blur(12px);
        }

        /* Paper Texture Overlay (Optional aesthetic touch) */
        .texture-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            opacity: 0.4;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
            mix-blend-mode: overlay;
            z-index: 10;
        }

        .label {
            position: absolute;
            top: -25px;
            left: 0;
            font-size: 14px;
            color: #888;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

    </style>
</head>
<body>

    <!-- This invisible SVG holds the filter definition -->
    <svg style="position: absolute; width: 0; height: 0;">
        <defs>
            <filter id="watercolor-distortion" x="-20%" y="-20%" width="140%" height="140%">
                <!-- 1. Generate smooth noise -->
                <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="5" seed="5" result="noise" />

                <!-- 2. Distort the source image using the noise -->
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="15" xChannelSelector="R" yChannelSelector="G" />

                <!-- 3. Blur edges slightly to merge pixels -->
                <feGaussianBlur stdDeviation="0.5" />
            </filter>
        </defs>
    </svg>

    <div class="texture-overlay"></div>

    <div class="container">
        <div class="watercolor-strip strip-1">
            <div class="label">Gradient 1: Blue to Red</div>
        </div>

        <div class="watercolor-strip strip-2">
            <div class="label">Gradient 2: Rust to Purple</div>
        </div>
    </div>

</body>
</html>