BG Pattern using HTML CSS - myuihub

home
element
about us
contact us

Search for Elements

Button
50
Loader
50
Pagination
06
BG Pattern
25
Checkbox
06

BG Pattern 01

BG Pattern 02

BG Pattern 03

BG Pattern 04

BG Pattern 05

BG Pattern 06

BG Pattern 07

BG Pattern 08

BG Pattern 09

BG Pattern 10

BG Pattern 11

BG Pattern 12

BG Pattern 13

BG Pattern 14

BG Pattern 15

BG Pattern 16

BG Pattern 17

BG Pattern 18

BG Pattern 19

BG Pattern 20

BG Pattern 21

BG Pattern 22

BG Pattern 23

BG Pattern 24

BG Pattern 25

BG Pattern 01

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #e16946;
    background-image: linear-gradient(45deg, transparent 33.3%, #e0e3cd 33.3%, #e0e3cd 66.6%, transparent 66.6%), linear-gradient(-45deg, transparent 33.3%, #e0e3cd 33.3%, #e0e3cd 66.6%, transparent 66.6%);
    background-size: 50px 50px;
}

BG Pattern 02

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --size1: 25px;
    --color1: #d4d0a3;
    --color2: #171717;
    --deg: #0000 71%, var(--color1) 0 79%, #0000 0;
    --size2: calc(var(--size1) / 2) / calc(2 * var(--size1)) calc(2 * var(--size1));
    background: linear-gradient(45deg, var(--deg)) calc(var(--size1) / -2) var(--size2), linear-gradient(135deg, var(--deg)) calc(var(--size1) / 2) var(--size2), radial-gradient(var(--color1) 35%, var(--color2) 37%) 0 0 / var(--size1) var(--size1);
}

BG Pattern 03

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --color1: #c49660;
    --color2: #f7f7f7;
    --size1: 85px;
    --size2: calc(var(--size1) / 2);
    background: radial-gradient( 50% 50% at 100% 0, var(--color1) 0% 5%, var(--color2) 6% 15%, var(--color1) 16% 25%, var(--color2) 26% 35%, var(--color1) 36% 45%, var(--color2) 46% 55%, var(--color1) 56% 65%, var(--color2) 66% 75%, var(--color1) 76% 85%, var(--color2) 86% 95%, #0000 96%), radial-gradient( 50% 50% at 0 100%, var(--color1) 0% 5%, var(--color2) 6% 15%, var(--color1) 16% 25%, var(--color2) 26% 35%, var(--color1) 36% 45%, var(--color2) 46% 55%, var(--color1) 56% 65%, var(--color2) 66% 75%, var(--color1) 76% 85%, var(--color2) 86% 95%, #0000 96%), radial-gradient( 50% 50%, var(--color1) 0% 5%, var(--color2) 6% 15%, var(--color1) 16% 25%, var(--color2) 26% 35%, var(--color1) 36% 45%, var(--color2) 46% 55%, var(--color1) 56% 65%, var(--color2) 66% 75%, var(--color1) 76% 85%, var(--color2) 86% 95%, #0000 96%), radial-gradient( 50% 50%, var(--color1) 0% 5%, var(--color2) 6% 15%, var(--color1) 16% 25%, var(--color2) 26% 35%, var(--color1) 36% 45%, var(--color2) 46% 55%, var(--color1) 56% 65%, var(--color2) 66% 75%, var(--color1) 76% 85%, var(--color2) 86% 95%, #0000 96%) var(--size2) var(--size2);
    background-color: var(--color1);
    background-size: var(--size1) var(--size1);
}

BG Pattern 04

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --color: #82d1af;
    background-color: #6db394;
    position: relative;
}

.myuihub-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, var(--color) 15%, transparent 15%), radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -6px, radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -1px, radial-gradient(circle, var(--color) 15%, transparent 15%) 10px 2px, radial-gradient(circle, var(--color) 15%, transparent 15%) 14px 5px, radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 8px, radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 12px, radial-gradient(circle, var(--color) 15%, transparent 15%) 23px 6px;
    background-size: 50px 50px;
}

BG Pattern 05

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --color1: #252528;
    --color2: #e25f29;
    background: radial-gradient( circle farthest-side at 0% 50%, var(--color1) 23.5%, rgba(255, 170, 0, 0) 0) 21px 30px, radial-gradient( circle farthest-side at 0% 50%, var(--color2) 24%, rgba(240, 166, 17, 0) 0) 19px 30px, linear-gradient( var(--color1) 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, var(--color1) 0) 0 0, linear-gradient( 150deg, var(--color1) 24%, var(--color2) 0, var(--color2) 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, var(--color2) 0, var(--color2) 76%, var(--color1) 0) 0 0, linear-gradient( 30deg, var(--color1) 24%, var(--color2) 0, var(--color2) 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, var(--color2) 0, var(--color2) 76%, var(--color1) 0) 0 0, linear-gradient(90deg, var(--color2) 2%, var(--color1) 0, var(--color1) 98%, var(--color2) 0%) 0 0 var(--color1);
    background-size: 39px 60px;
}

BG Pattern 06

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --size: 150px;
    --color1: #48b5ea;
    --color2: #303756;
    --length: #0000 calc(25% / 3), var(--color1) 0 25%, #0000 0;
    --deg: conic-gradient(from 120deg at 50% 87.5%, var(--color1) 120deg, #0000 0);
    background: var(--deg), var(--deg) 0 calc(var(--size) / 2), conic-gradient(from 180deg at 75%, var(--color2) 60deg, #0000 0), conic-gradient(from 60deg at 75% 75%, var(--color1) 0 60deg, #0000 0), linear-gradient(150deg, var(--length)) 0 calc(var(--size) / 2), conic-gradient( at 25% 25%, #0000 50%, var(--color2) 0 240deg, var(--color1) 0 300deg, var(--color2) 0), linear-gradient(-150deg, var(--length)) #2a6988;
    background-size: calc(0.866 * var(--size)) var(--size);
}

BG Pattern 07

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    --size: 70px;
    --color1: #23262e;
    --color2: #80837b;
    --color3: #dde0d9;
    --deg: 0 120deg, #0000 0;
    background: conic-gradient( from 0deg at calc(500% / 6) calc(100% / 3), var(--color3) var(--deg)), conic-gradient( from -120deg at calc(100% / 6) calc(100% / 3), var(--color2) var(--deg)), conic-gradient( from 120deg at calc(100% / 3) calc(500% / 6), var(--color1) var(--deg)), conic-gradient( from 120deg at calc(200% / 3) calc(500% / 6), var(--color1) var(--deg)), conic-gradient( from -180deg at calc(100% / 3) 50%, var(--color2) 60deg, var(--color1) var(--deg)), conic-gradient( from 60deg at calc(200% / 3) 50%, var(--color1) 60deg, var(--color3) var(--deg)), conic-gradient( from -60deg at 50% calc(100% / 3), var(--color1) 120deg, var(--color2) 0 240deg, var(--color3) 0);
    background-size: calc(var(--size) * 1.732) var(--size);
}

BG Pattern 08

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #fbff16;
    background-image: linear-gradient(45deg, transparent 33.3%, #333333 33.3%, #333333 66.6%, transparent 66.6%), linear-gradient(-45deg, transparent 33.3%, #333333 33.3%, #333333 66.6%, transparent 66.6%);
    background-size: 50px 60px;
}

BG Pattern 09

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #222627;
    background-image: radial-gradient(#20bd93 2px, #222627 2px);
    background-size: 30px 30px;
}

BG Pattern 10

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #fcfcfc;
    background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #fcfcfc 15px), repeating-linear-gradient( #d8468155, #d84681);
    opacity: 0.6;
}

BG Pattern 11

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #1a2943;
    background-image: linear-gradient(135deg, #a7aeb8 25%, transparent 25%), linear-gradient(225deg, #a7aeb8 25%, transparent 25%), linear-gradient(45deg, #a7aeb8 25%, transparent 25%), linear-gradient(315deg, #a7aeb8 25%, #1a2943 25%);
    background-position: 30px 0, 30px 0, 0 0, 0 0;
    background-size: 30px 30px;
    background-repeat: repeat;
}

BG Pattern 12

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #fce1ee;
    background-image: linear-gradient(135deg, #383534 25%, transparent 25%), linear-gradient(225deg, #383534 25%, transparent 25%), linear-gradient(45deg, #383534 25%, transparent 25%), linear-gradient(315deg, #383534 25%, #fce1ee 25%);
    background-position: 15px 0, 15px 0, 0 0, 0 0;
    background-size: 30px 30px;
    background-repeat: repeat;
}

BG Pattern 13

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #e6e4ce;
    background: linear-gradient(135deg, #1f1f1e55 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(225deg, #1f1f1e 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(315deg, #1f1f1e55 25%, transparent 25%) 0px 0/ 30px 30px, linear-gradient(45deg, #1f1f1e 25%, #e6e4ce 25%) 0px 0/ 30px 30px;
}

BG Pattern 14

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #eff2f8;
    background-image: radial-gradient( ellipse farthest-corner at 20px 20px, #dd5e6e, #dd5e6e 50%, #eff2f8 50%);
    background-size: 20px 20px;
}

BG Pattern 15

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #ffffff;
    background-image: radial-gradient(circle at center center, #ffffff, #ffffff), repeating-radial-gradient(circle at center center, #ffffff, #2a2428, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
    opacity: 0.4;
}

BG Pattern 16

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #313131;
    background-image: linear-gradient(30deg, #35d075 12%, transparent 12.5%, transparent 87%, #35d075 87.5%, #35d075), linear-gradient(150deg, #35d075 12%, transparent 12.5%, transparent 87%, #35d075 87.5%, #35d075), linear-gradient(30deg, #35d075 12%, transparent 12.5%, transparent 87%, #35d075 87.5%, #35d075), linear-gradient(150deg, #35d075 12%, transparent 12.5%, transparent 87%, #35d075 87.5%, #35d075), linear-gradient(60deg, #35d07577 25%, transparent 25.5%, transparent 75%, #35d07577 75%, #35d07577), linear-gradient(60deg, #35d07577 25%, transparent 25.5%, transparent 75%, #35d07577 75%, #35d07577);
    background-size: 34px 60px;
    background-position: 0 0, 0 0, 17px 30px, 17px 30px, 0 0, 17px 30px;
}

BG Pattern 17

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #332b2e;
    background-image: radial-gradient(#d3da0b 2px, transparent 2px), radial-gradient(#d3da0b 2px, #332b2e 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

BG Pattern 18

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #252637;
    background-image: linear-gradient(to right, #00b6ee, #00b6ee 8.5px, #252637 8.5px, #252637);
    background-size: 17px 100%;
}

BG Pattern 19

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #27292b;
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(45deg, #ad955e 0, #ad955e 1.7000000000000002px, #27292b 0, #27292b 50%);
}

BG Pattern 20

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #e5e5f7;
    background-image: linear-gradient(#444cf7 1.3px, transparent 1.3px), linear-gradient(to right, #444cf7 1.3px, #e5e5f7 1.3px);
    background-size: 26px 26px;
}

BG Pattern 21

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #101a2d;
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(0deg, #C7FB37, #C7FB37 1.3px, #101a2d 1.3px, #101a2d);
}

BG Pattern 22

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #272122;
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(to right, #56e0bf, #56e0bf 1.3px, #272122 1.3px, #272122);
}

BG Pattern 23

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #638099;
    background-image: linear-gradient(-45deg, #638099, #638099 50%, #d5ebf3 50%, #d5ebf3);
    background-size: 20px 20px;
}

BG Pattern 24

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #232422;
    background-image: repeating-linear-gradient(45deg, #edeae2 25%, transparent 25%, transparent 75%, #edeae2 75%, #edeae2), repeating-linear-gradient(45deg, #edeae2 25%, #232422 25%, #232422 75%, #edeae2 75%, #edeae2);
    background-position: 0 0, 14px 14px;
    background-size: 28px 28px;
}

BG Pattern 25

HTML

<div class="myuihub-pattern"></div>

CSS

.myuihub-pattern {
    height: 300px;
    background-color: #f5f1df;
    background: radial-gradient(circle, transparent 20%, #f5f1df 20%, #f5f1df 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #f5f1df 20%, #f5f1df 80%, transparent 80%, transparent) 30px 30px, linear-gradient(#be2a2b 2.4000000000000004px, transparent 2.4000000000000004px) 0 -1.2000000000000002px, linear-gradient(90deg, #be2a2b 2.4000000000000004px, #f5f1df 2.4000000000000004px) -1.2000000000000002px 0;
    background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
}

terms & conditions
privacy Policy

© 2025 myuihub. All rights reserved