Last active
April 27, 2023 00:35
-
-
Save joberror/37c5ef964d5b863d01483c0a52234bc2 to your computer and use it in GitHub Desktop.
Top Gradients I created from https://gradient.style
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Radial mix | |
| .modern-gradient { | |
| background-image: | |
| radial-gradient( | |
| farthest-corner circle at 128% -1% in oklab, | |
| oklch(100% 0.06 218) 27% 27%, oklch(100% 0.01 300) 50%, oklch(95% 0.04 152) 100% | |
| ) | |
| ; | |
| } | |
| .classic-gradient { | |
| background-image: | |
| radial-gradient( | |
| farthest-corner circle at 128% -1%, | |
| #d2ffff 27% 27%, #fffeff 50%, #dcf7e2 100% | |
| ) | |
| ; | |
| } | |
| // Pink - Hot | |
| .modern-gradient { | |
| background-image: | |
| linear-gradient( | |
| 326deg in oklab, | |
| oklch(70% 0.20 340) 27% 27%, oklch(90% 0.03 300) 100% | |
| ) | |
| ; | |
| } | |
| .classic-gradient { | |
| background-image: | |
| linear-gradient(326deg, #eb63c5 27% 27%, #e1daf0 100%) | |
| ; | |
| } | |
| // Pink - Creamier | |
| .modern-gradient { | |
| background-image: | |
| linear-gradient( | |
| 360deg in oklab, | |
| oklch(92% 0.05 340) 27% 27%, oklch(90% 0.03 300) 100% | |
| ) | |
| ; | |
| } | |
| .classic-gradient { | |
| background-image: | |
| linear-gradient(360deg, #fdd8ef 27% 27%, #e1daf0 100%) | |
| ; | |
| } | |
| // Pink - Neutral | |
| .modern-gradient { | |
| background-image: | |
| linear-gradient( | |
| 360deg in oklab, | |
| oklch(100% 0.06 340) 27% 27%, oklch(90% 0.03 300) 100% | |
| ) | |
| ; | |
| } | |
| .classic-gradient { | |
| background-image: | |
| linear-gradient(360deg, #fff0ff 27% 27%, #e1daf0 100%) | |
| ; | |
| } | |
| // Pink - Neutral distorted | |
| .modern-gradient { | |
| background-image: | |
| linear-gradient( | |
| 191deg in oklab, | |
| oklch(100% 0.06 340) 27% 27%, oklch(90% 0.03 300) 100% | |
| ) | |
| ; | |
| } | |
| .classic-gradient { | |
| background-image: | |
| linear-gradient(191deg, #fff0ff 27% 27%, #e1daf0 100%) | |
| ; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment