Skip to content

Instantly share code, notes, and snippets.

@joberror
Last active April 27, 2023 00:35
Show Gist options
  • Select an option

  • Save joberror/37c5ef964d5b863d01483c0a52234bc2 to your computer and use it in GitHub Desktop.

Select an option

Save joberror/37c5ef964d5b863d01483c0a52234bc2 to your computer and use it in GitHub Desktop.
Top Gradients I created from https://gradient.style
// 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