Gradiente Quiet High Noon
Um gradiente CSS linear de 4 cores, de #DEF2FF a #BF6E4A, interpolado em OKLCH para que o meio continue vivo.
Paradas
| HEX | RGB | OKLCH | Posição |
|---|---|---|---|
| #DEF2FF | rgb(222, 242, 255) | oklch(95% 0.028 236.2) | 0% |
| #B0CBFF | rgb(176, 203, 255) | oklch(84% 0.079 263.3) | 33% |
| #B89FE8 | rgb(184, 159, 232) | oklch(75.1% 0.106 299.6) | 67% |
| #BF6E4A | rgb(191, 110, 74) | oklch(62.1% 0.115 44.1) | 100% |
CSS
A primeira declaração é um gradiente sRGB simples, que funciona em qualquer navegador. A segunda interpola em OKLCH, o que mantém o meio tão vivo quanto as pontas.
background: linear-gradient(120deg, #DEF2FF, #B0CBFF, #B89FE8, #BF6E4A); background: linear-gradient(120deg in oklch, #DEF2FF, #B0CBFF, #B89FE8, #BF6E4A);
Tailwind CSS v4
bg-linear-[120deg_in_oklch,#DEF2FF,#B0CBFF,#B89FE8,#BF6E4A]
Faça dela a sua
Mude as paradas, o ângulo e o tipo no Criador de gradientes, ou transforme as paradas em uma paleta.
Gradientes relacionados
- Cozy Windsweptlinear-gradient(90deg, #7B7FC2, #89AADF, #9BD8FF)
- Cozy Poppylinear-gradient(90deg, #0C003F, #FFA73D)
- Vivid Flamingolinear-gradient(135deg, #5C3C84, #F17107)
- Little High Noonlinear-gradient(315deg, #9D7F71, #D699B7, #C9B3FC, #DFF2FF)
- Little Sky Decklinear-gradient(200deg, #DBF3FF, #FFA4CB, #C26C49)
- Evening Skylarklinear-gradient(135deg, #FFE9E2, #C9A4FB, #538FAB)
- Lit Coral Skylinear-gradient(90deg, #26127A, #EC8422, #E1D669)
- Faded Rubylinear-gradient(225deg, #120C4A, #D27400)