2 |
--------------------------------------------------------------------------------
/css-pattern.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Afif13/CSS-Pattern/66681684c1ca514328043b8ebd1407fe65830cc7/css-pattern.jpg
--------------------------------------------------------------------------------
/css-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Afif13/CSS-Pattern/66681684c1ca514328043b8ebd1407fe65830cc7/css-pattern.png
--------------------------------------------------------------------------------
/fav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Afif13/CSS-Pattern/66681684c1ca514328043b8ebd1407fe65830cc7/fav.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | powered by CSS gradients
29 |Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns
Don't know which Pattern to use?
Let me pick one for you!
What about a nice CSS Loader?
680 | 681 | Get more CSS loaders 682 |I also share cool CSS Tips
It takes one minute to read a tip
You are not looking for a CSS pattern?
Maybe you want a CSS Shape?
You reached the 100th Pattern 🥳
Keep scrolling or surprise yourself
I also have a collection of CSS Generators
2121 | Go to CSS Generators 2122 |Do you want to have some fun?
Solve a CSS Challenge
You reached the end but it's not the end!
This collection will keep growing
2522 | 
2523 |
2524 |
2525 |
2532 |
2533 |
2547 |
2548 |
2549 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-weight: 400;
3 | font-size: 18px;
4 | line-height: 1.5;
5 | color: #415462;
6 | font-family: system-ui,-apple-system,"Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
7 | scroll-snap-type: y mandatory;
8 | }
9 | html:has(section:target) {
10 | scroll-snap-type: none;
11 | }
12 | *,
13 | *:before,
14 | *:after{
15 | box-sizing:border-box;
16 | }
17 | body {
18 | margin: 0;
19 | display: flex;
20 | flex-wrap: wrap;
21 | }
22 | body section {
23 | display: grid;
24 | min-height: 50vh;
25 | place-content: center;
26 | scroll-snap-align: start;
27 | flex: 50%;
28 | }
29 | @media (max-width: 750px) {
30 | body section{
31 | flex: 100%;
32 | }
33 | }
34 | body section:target {
35 | min-height: 100vh;
36 | flex: 100%;
37 | }
38 | html:has(section:target) section:not(:target) {
39 | display: none;
40 | }
41 | h1 {
42 | font-style: normal;
43 | font-weight: 700;
44 | font-size: 50px;
45 | font-family: 'Montserrat', sans-serif;
46 | line-height: 56px;
47 | text-transform: none;
48 | letter-spacing: -2px;
49 | color: #505050;
50 | white-space: nowrap;
51 | }
52 | h1 span {
53 | font-size: 70px;
54 | vertical-align: middle;
55 | }
56 | h1 span:first-child {
57 | letter-spacing: -14px;
58 | }
59 | h1 span:nth-child(2) {
60 | position: relative;
61 | letter-spacing: -15px;
62 | z-index: 1;
63 | }
64 | h1 span:nth-child(3) {
65 | color: #c39f76;
66 | filter: blur(2px);
67 | }
68 | h1 span:nth-child(2):before {
69 | content: "";
70 | position: absolute;
71 | top: 10px;
72 | height: 28px;
73 | border-left: 1.5px solid #fff;
74 | border-top: 1.5px solid #fff;
75 | width: 44px;
76 | left: 2px;
77 | border-top-left-radius: 41px 24px;
78 | }
79 | h1 span:nth-child(2):after {
80 | content: "";
81 | position: absolute;
82 | bottom: 0;
83 | left: 4.5px;
84 | height: 37px;
85 | border-left: 1.5px solid #fff;
86 | z-index: 5;
87 | }
88 | body header {
89 | text-align: center;
90 | position: absolute;
91 | z-index: 9;
92 | inset: 0 0 auto;
93 | background: #fffe;
94 | box-shadow: 0 0 20px 30px #fffe;
95 | margin: auto;
96 | width: fit-content;
97 | }
98 | body header > * {
99 | margin: 5px;
100 | }
101 | body header h1 + p {
102 | text-indent: 120px;
103 | margin-top: -22px;
104 | font-size: 15px;
105 | }
106 | section button {
107 | border-radius: 5px;
108 | box-shadow: 0 0.125rem 1rem rgb(27 40 50 / 4%), 0 0.125rem 2rem rgb(27 40 50 / 8%), 0 0 0 0.0625rem rgb(27 40 50 / 2%);
109 | opacity: .85;
110 | margin: 1em;
111 | border: none;
112 | font-size: 1rem;
113 | padding: .85rem 1.5rem;
114 | cursor: pointer;
115 | }
116 | section button:hover {
117 | opacity: 1;
118 | }
119 | section style {
120 | display: inline-block;
121 | font-size: 0;
122 | line-height: 1.4;
123 | cursor: text;
124 | white-space: pre;
125 | }
126 | a.tweet {
127 | background-color: #08769b;
128 | border-radius: 9999px;
129 | display: grid;
130 | place-content: center;
131 | width: 52px;
132 | height: 52px;
133 | position: fixed;
134 | left: 15px;
135 | bottom: 124px;
136 | box-shadow: rgb(0 0 0 / 40%) 0px 4px 8px;
137 | }
138 | .credit {
139 | position: fixed;
140 | z-index: 99;
141 | top: 0;
142 | left: 0;
143 | transform-origin: right top;
144 | transform: translate(-30%) rotate(-45deg);
145 | background: #08769b;
146 | color: #fff;
147 | box-shadow: 0 0 0 50px #08769b;
148 | clip-path: inset(0 -100%);
149 | text-decoration:none;
150 | }
151 | #bmc-wbtn {
152 | position: fixed;
153 | left: 15px;
154 | bottom: 60px;
155 | display: flex;
156 | align-items: center;
157 | justify-content: center;
158 | width: 52px;
159 | height: 52px;
160 | background: rgb(8, 118, 155);
161 | border-radius: 32px;
162 | box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 8px;
163 | }
164 | #bmc-wbtn img {
165 | height: 40px;
166 | width: 40px;
167 | }
--------------------------------------------------------------------------------
/twitter-24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Afif13/CSS-Pattern/66681684c1ca514328043b8ebd1407fe65830cc7/twitter-24.png
--------------------------------------------------------------------------------