Background-blend-mode Test

Developer
Oliver Kühn
Size
4,744 Kb
Views
14,168
  1. Background-blend-mode Test Previews
  2. Background-blend-mode Test HTML Codes
  3. Background-blend-mode Test CSS Codes

How do I make an background-blend-mode test?

Test of background blend mode.. What is a background-blend-mode test? How do you make a background-blend-mode test? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Background-blend-mode Test Previews
IQ Test

Background-blend-mode Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>background-blend-mode Test</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Stalinist+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rgb test-1"></div>
<div class="rgb test-2"></div>
</body>
</html>

Background-blend-mode Test - Script Codes CSS Codes

body
{ background-color: #333;
}
.rgb
{ width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);
}
.test-1
{ -webkit-transform: translate(-105px, -50%); background: -webkit-linear-gradient( rgba(255,0,0,1) 0%, rgba(255,0,0,1) 33.33%, transparent 33.33% ), -webkit-linear-gradient( rgba(0,255,0,1) 0%, rgba(0,255,0,1) 66.66%, transparent 66.66% ), -webkit-linear-gradient( rgba(0,0,255,1) 0%, rgba(0,0,255,1) 100% ); background-blend-mode: difference; /*-webkit-background-blend-mode: difference;*/ z-index: 20;
}
.test-2 { -webkit-transform: translate(105px, -50%); background-blend-mode: difference; /*-webkit-background-blend-mode: difference;*/ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5hJREFUeNrsnYFx2zAMRcVcB3AnsLOBM4GVCeJOEGeSXifwdQJnAzkTWJ5A2sDxBM4GKlFBV1mVHckhRZD6/4LyzndpVTwDBEUJVJFgFVE00cOcbcpj9VkX5do+eDzymKvyM5FSAgHE2hY8zi39UwQm1banUTIgJxC0rbQl2gpHlvA1TMYMIta2cQjhktE1xWMCQd/ETCCIptE1rkIHcfAARNMOQYHh1LTzEETTdl6nMp6sNwGAaNrau8lfX/BS2ylAGJXR/23pS1SsAwbhT7ToC5t5Uj3ZqMZm0mDMA09RXVLYXAqM1YhBNG0FGIACGOKgAIYgKIBhF4rqW03pIcOmQS89qHL/xSwQrrWzaMx7Brfpg6G8GwPCq9FdJKXW9k8UIY/GdiZHdjvE2m0WIxHCN9ESfMmN6Id2+PZmIJyqDpg3jM4n99dS190nf8EaMIyKfPnzpgjh3bEdfGhFNMGnfYEQjBi+syJ6FuwRq3EPVvHqAhCayGf4IlvVu3b+/aeTOpMDDPuatUWJagGSYUU+3ApeA3i4CASVlfuKq5mynuGfwfXcGiG8Kj/BP070vVq91yNkCb8407ItZT3BL870dJaykK7kpK0qQnCLxL3iespawB/OtainLCwGhSwSFeYPOdJA1DdEhhzRnZI7ABGlOQGZwg9iNEWECIwQPMQgRxOqsgr4QVClBSAAAgEIgEAAAiAQgAAIBCAAgs0pOcrpXhZapMrR34cccvhBVoQc4QcxOiJChEVI9dQJKi0JFZb+qZ7LQpQIiA76owKSwh/OldaB7OEP59pz2sLD1kL072FrfllkC58407bthZ03+MWZ3mqVVimkLffp6ixC+INX+GZwvda7A+G1aPc6ey0ajQMcLwabjQPa+mX9hp8G03++RvMZd+rWfIb1C/6yrlYfo4GZG11sYIYWfwIqq85Cv147B1de8znaxA6rr7WJ5V98gR+N6cVIu3GkLkGtxmupC834v7Aijzo248dxFcPMG2aPq6hBwYEu/dXrQJdb5hM0WcY5VIABKDjLEDAAJTQY9eoLhxMLW6Ph+G6BwgH3QkUnuwWewk6Fb53AA44WP6Li2s4jbQcHAGJXhLSlzeXxwUMQBzHlrEUwmSfVU7ggLqSyjcQ972LMT9vw5E9RkziEkPA1OJ+slTQ4UfntXPBoa/VL+xNpVL5GlipB3SyUD6mNwUx5nPQAlfOOHY3UICFXwl9w/SPAAEUD2k/Km5XvAAAAAElFTkSuQmCC) no-repeat, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5ZJREFUeNrsnYFt6jAQhu1OQCeAbkAngE5QOkHpJE9vAvQmoBtAJyBMkGxAmYBuwLNzjghpoAm147Pz/1awhNSW3sedz7FzloKzjmKgXsfmGpq+eK+JMnV9mX5v+kzI/D2WkgwBTNU1Mf3Y0V/SYBJ1bfOeMSA/EI5irq6Vuny1lfkMgz6DmKpr6RHCpbbMP1uPQOhvYsoQRLWl+WeNHMQuABDVtosLDIWmTYAgqm0TdiijwXoZAYhqW4Q3+B/FTF2HCGEU7ZD/j4F4xSJiEAF5y1GMAsmeXGRjI24wxpGHqCYhbMwFxrzHIKptDhiAAhj8oAAGIyiA4RSKbJ1NCZXmQW30qKyc2QdCuXZqVuyg5voyUD7tAaHZ6MbhCl7s0h7yZG9lsl+3Q9zdZrHiIXQTbYUvuRW9KIuvbwdCoWqHccPqePJwLXTd/fALFoBhVdqWf27zEFod28CGTqQH+KQtEA1jCts5kd4L9oTZeACzeHkBiB7IR/giO9Wnsv7Dz4M6kQMM9xrVeYmsAZJiRt7hDF6Kx8tAkFl5z7iqIesV9ulcr/UeQrPyA+zjRffF7L3sITPYxZtmdSHrGXbxpufzkIVwxSZsFR6CWyT+NS2HrAns4V2TcsjCZJDJJFFi/GAkKaTE7JzXrP0OoYqVxhrIEHZgoyE8hKGHYBMDHw1kvpgIMUq0AARAIAABEAhAAAQCEACBAKT3QLA4xUeZvpeFEql8lG9yyGAHXh6yhx3YaA8PYeYhxa4TZFo8UixZ7MuClzDwDv1SAElgD+9KykC2sId3bSlq0RiCzXL+VdpsTQ+LrGETb1rXPbDzAbt408cp0SqEsOU9XJ17CL3xDtt0rvdydSA8Fu1fZ49Fo3CA78lgpXBAXb2sf7BTZ/pmaxSf8aeGxWdIf2Ev56q1MQqY+dHFAmYo8ccgs2ou1Ot1c3DlFaFMbLf6ZZlY+sE32NGa3uyUG0foYlRq/BS6UIz/NzPyhsX4cVxFN+OG5eMqTlBwoEt7tTrQ5ZbxBEWWcQ4VYAAKzjIEDECJDkY5+8LhxMzmaDi+m6FwwL3gCmYWeQg7mNPrAlK83hKIV1xbedTLweGD2JhV1EhE6fEuQBA7PumsOzBpINlTxCDqQ9mS5Zr3sc+7bWjw116z8ghhZT6D98FasoNDe8Empnc1+9XrE4mgx8gSe8dqxwbkUmgjMEPTD1qAysyKne73gjY3J5z/3f8CDACqv9scfnQzoQAAAABJRU5ErkJggg==) no-repeat 50px 0, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5pJREFUeNrsnYFxozAQRVEqcCqw0wGpwE4FcSqIU8nNVeC5CkgH+CoAVwAdEFdgd8BJQngIgRzEElqJ/2fWmslMEnufd6VFsGIBeZUb/hJyW6pxocYhyrld1HhSIzd2ofppGTHnC2cLAGs1hob+kQCTcjtWI11AliCUO24xt9KSxeo9LOYMgkdAGVmE0GeRSpOzASG+iRlBEG3LqvfqN4jCARBtKzwDI1NT4iCItiWOpzI5WUcegOiaY1yb/Mstt7OHMGo7V5/RjajYewyibXvC0VKuHFk9mViNrajBCD1PUUNSWEgFxm7GINq2AwxAAQyCUACDEBTAMAmFjV9NBRm2DEbpkbs5NwBErrUztWMHDddFQfnQCERWo4nBHTzfJSLkSePO5Kwuhxi8zKIlQuRFtBhfci164S4/3ABEpqoC84bW+eThu9R1958/sAcMrRK+/PXDCJG7Ywl8aERigk/HAhEwNvCdEXEY7AnVuANVfE+EiDstghW+yEbFC0X2MGBSl+QAw7xWXVHSESFiSxIV+XQVPHv8BghWVrZXXO2U9Qr/TK7XngiRVfkZ/rGi+7p6b0bIFn6xpm1XynqGX6zpuZWykK6opK06QnCJxL42zZS1hj+sa91MWSgGiRSJDPMHJTHGUJ3TqtrvkKpIKRRAlvADGS0RIQQjBDcx0NGCVduJEJl1FoAACAQgAAIBCIBAAAIgEIAACDan6CgX17LQIpWO5E0OOfxAK0JO8AMZnRAhxCKkvusEKy0aayxW35eFKCEQHeKlBpLCH9aVNoEc4Q/rOqrCUM4huFnOvpo3W8uHRQ7wiTUduh7Y+Qu/WNPV93ikjVC6akWI/ME7fDO53pvdgfBYtH19eiwajQOsF4OfGwd09cv6Az9Npi++RvMZe/oY2HxG6jf8ZVydPkYDMztK+xqYocUfgZXVCHl5qBeBQ8X6hTax0+rWNrHyF9/gR21609RuHK3GCbUav6YuNOO/qSIf1owfx1VMM2/oPq7iCgUHuozXqANdfjKf7DAf4BwqwAAUnGUIGIDiHYzm6guHExNb3eH4boLCAfdUwWw9T2FndXqdS5LREvm5n1G6fPlI7DyK7WDnQSRqF9UXyeVx4SCIgtBy1hiYzJHVk88gOlNZRHSO2ATzlZz8RdTEFiHE6j1Yn6wZPTjyXrC1Gk1Vv2J/Ig2qx8hSjcdq+wakE1CobKnGxQhQudqxE+NJjTklAG39E2AAt17cXBHJnnMAAAAASUVORK5CYII=) no-repeat 25px 50px;
}
Background-blend-mode Test - Script Codes
Background-blend-mode Test - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3
Size 4,744 Kb
Views 14,168
Do you need developer help for Background-blend-mode Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Kühn (0x04) Script Codes
Name
FourPerfectlyRoundCircles
Perforated foil
Unicode glitching
Random Paint
7 Segment Display Characters
Pentagon loading indicator
Pure CSS Jalousien
ASCIICanvas
X4.css Theme System
Scanline effect
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!