├── LICENSE
├── text.html
├── background.html
├── colorgrad-medium-background.css
├── colorgrad.css
├── colorgrad-slow.css
└── README.md
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Surya Dantuluri
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | cool text
5 |
36 | backlinks to suryad.com are always welcome!
37 |
38 |
39 |
40 | Just add: <![CDATA[<a href="https://suryad.com">cool colors</a>]]> to your site to help!
41 |
42 |
43 |
44 | Code available here: Github repo
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/background.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | cool background
5 |
40 | backlinks to suryad.com are always welcome!
41 |
42 |
43 |
44 | Just add: <![CDATA[<a href="https://suryad.com">cool colors</a>]]> to your site to help!
45 |
46 |
47 |
48 | Code available here: Github repo
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/colorgrad-medium-background.css:
--------------------------------------------------------------------------------
1 | .colorgrad {
2 | background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%, rgb(0, 84, 253) 50%) repeat scroll 0% 0% / 600vw 600vw padding-box text;
3 | background-color:
4 | rgba(0, 0, 0, 0);
5 | background-position-x: 0%;
6 | background-position-y: 0%;
7 | background-repeat: repeat;
8 | background-attachment: scroll;
9 | background-image: repeating-linear-gradient(-45deg,
10 | rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%,
11 | rgb(0, 84, 253) 50%);
12 | background-size: 600vw 600vw;
13 | background-origin: padding-box;
14 | -webkit-animation: 60s ease 0s infinite normal forwards running followThrough;
15 | -moz-animation: 60s ease 0s infinite normal forwards running followThrough;
16 | animation: 60s ease 0s infinite normal forwards running followThrough;
17 | }
18 |
19 | @keyframes followThrough {
20 | 0%{background-position:0% 0%}
21 | 50%{background-position:50% 50%}
22 | 100%{background-position:0% 0%}
23 | }
24 |
25 | @-webkit-keyframes followThrough {
26 | 0%{background-position:0% 0%}
27 | 50%{background-position:50% 50%}
28 | 100%{background-position:0% 0%}
29 | }
30 |
31 | @-moz-keyframes followThrough {
32 | 0%{background-position:0% 0%}
33 | 50%{background-position:50% 50%}
34 | 100%{background-position:0% 0%}
35 | }
36 |
--------------------------------------------------------------------------------
/colorgrad.css:
--------------------------------------------------------------------------------
1 | .colorgrad {
2 | background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%, rgb(0, 84, 253) 50%) repeat scroll 0% 0% / 600vw 600vw padding-box text;
3 | background-color:
4 | rgba(0, 0, 0, 0);
5 | background-position-x: 0%;
6 | background-position-y: 0%;
7 | background-repeat: repeat;
8 | background-attachment: scroll;
9 | background-image: repeating-linear-gradient(-45deg,
10 | rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%,
11 | rgb(0, 84, 253) 50%);
12 | background-size: 600vw 600vw;
13 | background-origin: padding-box;
14 | background-clip: text;
15 | -webkit-background-clip: text;
16 | -webkit-animation: 10s linear 0s infinite normal forwards running followThrough;
17 | -moz-animation: 10s linear 0s infinite normal forwards running followThrough;
18 | animation: 10s linear 0s infinite normal forwards running followThrough;
19 |
20 | -webkit-text-fill-color: transparent;
21 |
22 | }
23 |
24 | @keyframes followThrough {
25 | 0%{background-position:0% 0%}
26 | 50%{background-position:50% 50%}
27 | 100%{background-position:0% 0%}
28 | }
29 |
30 | @-webkit-keyframes followThrough {
31 | 0%{background-position:0% 0%}
32 | 50%{background-position:50% 50%}
33 | 100%{background-position:0% 0%}
34 | }
35 |
36 | @-moz-keyframes followThrough {
37 | 0%{background-position:0% 0%}
38 | 50%{background-position:50% 50%}
39 | 100%{background-position:0% 0%}
40 | }
41 |
--------------------------------------------------------------------------------
/colorgrad-slow.css:
--------------------------------------------------------------------------------
1 | .colorgrad {
2 | background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%, rgb(0, 84, 253) 50%) repeat scroll 0% 0% / 600vw 600vw padding-box text;
3 | background-color:
4 | rgba(0, 0, 0, 0);
5 | background-position-x: 0%;
6 | background-position-y: 0%;
7 | background-repeat: repeat;
8 | background-attachment: scroll;
9 | background-image: repeating-linear-gradient(-45deg,
10 | rgb(0, 84, 253) 0%, rgb(255, 25, 247) 7.14%, rgb(255, 46, 93) 14.28%, rgb(255, 170, 7) 21.42%, rgb(255, 170, 7) 28.56%, rgb(255, 46, 93) 35.7%, rgb(255, 25, 247) 42.84%,
11 | rgb(0, 84, 253) 50%);
12 | background-size: 600vw 600vw;
13 | background-origin: padding-box;
14 | background-clip: text;
15 | -webkit-background-clip: text;
16 | -webkit-animation: 90s linear 0s infinite normal forwards running followThrough;
17 | -moz-animation: 90s linear 0s infinite normal forwards running followThrough;
18 | animation: 90s linear 0s infinite normal forwards running followThrough;
19 |
20 | -webkit-text-fill-color: transparent;
21 |
22 | }
23 |
24 | @keyframes followThrough {
25 | 0%{background-position:0% 0%}
26 | 50%{background-position:50% 50%}
27 | 100%{background-position:0% 0%}
28 | }
29 |
30 | @-webkit-keyframes followThrough {
31 | 0%{background-position:0% 0%}
32 | 50%{background-position:50% 50%}
33 | 100%{background-position:0% 0%}
34 | }
35 |
36 | @-moz-keyframes followThrough {
37 | 0%{background-position:0% 0%}
38 | 50%{background-position:50% 50%}
39 | 100%{background-position:0% 0%}
40 | }
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # gradient
2 | multicolor gradients for all
3 |
4 | inspired by [dharma.io](https://dharma.io) and openai, i reverse-engineered how they did multicolor gradients and am sharing them with the world to **spruce up websites**
5 |
6 | there are several flavors:
7 |
8 | | style | cdn link | speed of gradient | example |
9 | | ------------- |:-------------:| -----:| :------:|
10 | | text fill-in | https://sdan.cc/assets/css/colorgrad.css | 10s (fast) | https://sdan.io/staticcctexthtml |
11 | | text fill-in | https://sdan.cc/assets/css/colorgrad-slow.css | 90s (slow) | https://sdan.io/surya (my name) |
12 | | background | https://sdan.cc/assets/css/colorgrad-slow-background.css | 60s (medium) | https://sdan.io/staticccbackgroundhtml |
13 |
14 | ## what's included in this repo:
15 | ### text.html
16 | a simple example of text fill-in (also available here: https://sdan.io/staticcctexthtml). you can play around with it and add your own text/styling
17 | ### background.html
18 | a simple example of background takeover (also available here: https://sdan.io/staticccbackgroundhtml). you can play around with it and add your own text/styling
19 |
20 | ## use it on your website:
21 | depending on if you want text fill-in or a background takeover, add the respective **cdn link, available above, such as: https://sdan.cc/assets/css/colorgrad.css** to your site as such:
22 | ```
23 |
29 | this text is not colored this text is colored
30 |
31 | ```
32 | ### background:
33 | ```
34 |
35 | the background is so colorful!
36 |
37 | ```
38 |
39 | ## support:
40 | backlinks to `Color brought you by Surya ` would be helpful!
41 |
42 | feel free to open up issues if there's any problems
43 |
--------------------------------------------------------------------------------