🎨 معرض الألوان والخلفيات الشامل

background-color: #f5f5f5;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+');

background-color: #f5f5f5;
background-image: 
    radial-gradient(circle at 100% 150%, #f5f5f5 24%, #e0e0e0 25%, #e0e0e0 28%, #f5f5f5 29%, #f5f5f5 36%, #e0e0e0 36%, #e0e0e0 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, #f5f5f5 24%, #e0e0e0 25%, #e0e0e0 28%, #f5f5f5 29%, #f5f5f5 36%, #e0e0e0 36%, #e0e0e0 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, #e0e0e0 10%, #f5f5f5 11%, #f5f5f5 23%, #e0e0e0 24%, #e0e0e0 30%, #f5f5f5 31%, #f5f5f5 43%, #e0e0e0 44%, #e0e0e0 50%, #f5f5f5 51%, #f5f5f5 63%, #e0e0e0 64%, #e0e0e0 71%, transparent 71%, transparent);
background-size: 80px 80px;

background-color: #f5f5f5;
background-image: 
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0),
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;

background-color: #f5f5f5;
background-image: 
    radial-gradient(circle farthest-side at 0% 50%, #f5f5f5 23.5%, rgba(240,240,240,0.65) 0),
    radial-gradient(circle farthest-side at 100% 50%, #f5f5f5 23.5%, rgba(240,240,240,0.65) 0);
background-size: 50px 100px;

background: #f5f5f5;
background-image:
    linear-gradient(90deg, transparent 50%, rgba(220, 220, 220, 0.5) 50%);
background-size: 50px 50px;

background-color: #f9f9f9;
background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
background-size: 15px 15px;

background-color: #f9f9f9;
background-image: 
    linear-gradient(rgba(220, 220, 220, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 220, 220, 0.5) 1px, transparent 1px);
background-size: 30px 30px;

background-color: #f5f5f5;
background-image: 
    linear-gradient(to right, rgba(230, 230, 230, 0.5), rgba(200, 200, 200, 0.2) 20%, rgba(200, 200, 200, 0) 60%),
    linear-gradient(to bottom, rgba(230, 230, 230, 0.5), rgba(200, 200, 200, 0.2) 20%, rgba(200, 200, 200, 0) 60%);
background-size: 100% 100%;

background-color: #f5f5f5;
background-image: 
    linear-gradient(#e0e0e0 1px, transparent 1px),
    linear-gradient(90deg, #e0e0e0 1px, transparent 1px),
    linear-gradient(#e9e9e9 1px, transparent 1px),
    linear-gradient(90deg, #e9e9e9 1px, transparent 1px);
background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;

background-color: #f5f5f5;
background-image: 
    repeating-radial-gradient(circle at 50% 50%, rgba(220, 220, 220, 0.5), rgba(230, 230, 230, 0.5) 10px, rgba(240, 240, 240, 0.5) 20px);

background-color: #f8f8f8;
background-image: 
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
background-size: 6px 6px;

background-color: #f9f9f9;
background-image:
    linear-gradient(30deg, #f5f5f5 12%, transparent 12.5%, transparent 87%, #f5f5f5 87.5%, #f5f5f5),
    linear-gradient(150deg, #f5f5f5 12%, transparent 12.5%, transparent 87%, #f5f5f5 87.5%, #f5f5f5),
    linear-gradient(30deg, #f5f5f5 12%, transparent 12.5%, transparent 87%, #f5f5f5 87.5%, #f5f5f5),
    linear-gradient(150deg, #f5f5f5 12%, transparent 12.5%, transparent 87%, #f5f5f5 87.5%, #f5f5f5),
    linear-gradient(60deg, #e0e0e077 25%, transparent 25.5%, transparent 75%, #e0e0e077 75%, #e0e0e077);
background-size: 80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0;

background-color: #f5f5f5;
background-image: 
    repeating-linear-gradient(45deg, rgba(220, 220, 220, 0.2), rgba(220, 220, 220, 0.2) 5px, rgba(245, 245, 245, 0.5) 5px, rgba(245, 245, 245, 0.5) 10px);

background-color: #f8f8f8;
background-image:
    linear-gradient(#e6e6e6 1.5px, transparent 1.5px),
    linear-gradient(90deg, #e6e6e6 1.5px, transparent 1.5px),
    linear-gradient(rgba(220, 220, 220, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 220, 220, 0.3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -1.5px -1.5px, -1.5px -1.5px, -1px -1px, -1px -1px;

background-color: #fafafa;
background-image:
    radial-gradient(circle at 0% 50%, rgba(230, 230, 230, 0.2) 9px, transparent 10px),
    radial-gradient(at 100% 50%, rgba(230, 230, 230, 0.2) 9px, transparent 10px),
    radial-gradient(circle at 50% 0%, rgba(230, 230, 230, 0.2) 9px, transparent 10px),
    radial-gradient(circle at 50% 100%, rgba(230, 230, 230, 0.2) 9px, transparent 10px);
background-size: 60px 60px;
background-position: 0 0;