RT
Все инструменты
На главную

CSS-эффекты и графика

Голографический фон

Переливающийся радужный фон с бликом и зерном: конический градиент, полоса света и шум сложены в один блок CSS.

Переливы

Превью

Голографическая карточка

Готовый блок CSS

.holo {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260' width='260' height='260'%3E %3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.22'/%3E %3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.18) 65%, rgba(255,255,255,0.28) 100%),
    conic-gradient(from 120deg at 50% 50%, hsl(0 85% 68%) 0%, hsl(60 85% 68%) 16.7%, hsl(120 85% 68%) 33.3%, hsl(180 85% 68%) 50%, hsl(240 85% 68%) 66.7%, hsl(300 85% 68%) 83.3%, hsl(0 85% 68%) 100%);
  background-blend-mode: soft-light, screen, normal;
}

Только радуга

background-image: conic-gradient(from 120deg at 50% 50%, hsl(0 85% 68%) 0%, hsl(60 85% 68%) 16.7%, hsl(120 85% 68%) 33.3%, hsl(180 85% 68%) 50%, hsl(240 85% 68%) 66.7%, hsl(300 85% 68%) 83.3%, hsl(0 85% 68%) 100%);