Градієнти

Шарові градієнти з глибиною та читабельністю

Баланс контрасту, позицій стопів і легких радіальних акцентів.

Чекліст

Чекліст градієнтів

Три кроки до чистого градієнта

  • Обирайте 2–3 відтінки; розводьте стопи, щоб уникнути «бруду».
  • Додайте радіальний хайлайт, щоб вести погляд.
  • Тримайте контраст тексту накладкою або суцільним фоном.

Демо

Шарований мікс

Лінійна база + радіальне світло

background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), transparent 45%),
  linear-gradient(135deg, #7c3aed, #6ee7ff);

Патерни

Де застосувати

Фони героїв, CTA-картки, аватари

Скляний хедер

Градієнт + blur + м’який бордер

background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.12);

Конічний акцент

Тонкий мазок для лейблів

background: conic-gradient(from 120deg, #6dd3ff, #ff7ce6, #6dd3ff);
mask: linear-gradient(90deg, transparent 0, black 25%, black 75%, transparent 100%);