Интерактивный справочник

CSS Design
Showcase

Полная витрина всех возможностей CSS — от градиентов и стеклоэффектов до анимаций, фильтров и трансформаций. Всё в одном месте.

🚀 Начать обзор ✨ Стекло-эффект
Scroll
01 / Градиенты

Все виды градиентов

Линейные, радиальные, конические, повторяющиеся и мультиградиенты

Linear Gradient
linear-gradient
Линейный градиент
Плавный переход цветов по линии. Поддерживает углы и направления.
background: linear-gradient(135deg, #6c5ce7, #fd79a8, #fdcb6e);
Radial Gradient
radial-gradient
Радиальный градиент
Круговой переход цветов от центральной точки наружу.
background: radial-gradient(circle at 30% 40%, #6c5ce7, #00cec9, #0a0a0f);
Conic Gradient
conic-gradient
Конический градиент
Переход цветов по кругу, как циферблат часов.
background: conic-gradient(from 0deg, #6c5ce7, #fd79a8, #fdcb6e, #00cec9, #6c5ce7);
Repeating Linear
repeating-linear-gradient
Повторяющийся линейный
Линейный градиент, повторяющийся полосами.
Repeating Radial
repeating-radial-gradient
Повторяющийся радиальный
Концентрические круги с повторением.
Repeating Conic
repeating-conic-gradient
Повторяющийся конический
Повторяющийся секторный узор.
Multi-Layer
multiple backgrounds
Многослойный градиент
Наложение нескольких градиентов для создания глубины.
Diamond
combined gradients
Алмазный градиент
Комбинация градиентов под углами для создания ромба.
Mesh Gradient
mesh simulation
Mesh-градиент
Имитация mesh-градиента через наложение радиальных.
02 / Стекломорфизм

Эффекты стекла

Glassmorphism, Liquid Glass, Frosted Glass и другие стеклоэффекты

glassmorphism
Стандартное стекло
Backdrop-filter blur + полупрозрачный фон
backdrop-filter: blur(20px) saturate(180%);
light glass
Лёгкое стекло
Минимальное размытие, больше прозрачности
heavy glass
Плотное стекло
Сильное размытие с насыщенностью
colored glass
Цветное стекло
Стекло с цветным оттенком
frosted glass
Морозное стекло
Имитация замёрзшего стекла
liquid glass ✨
Жидкое стекло
Продвинутый эффект с бликом и глубиной, как в Apple Vision Pro
backdrop-filter: blur(25px) saturate(200%); + gradient overlay
03 / Тени

Box & Text Shadows

Мягкие, жёсткие, неоновые, цветные и многослойные тени

Soft Shadow
box-shadow
Мягкая тень
Hard Shadow
box-shadow
Жёсткая тень
Neon Glow
multi-layer shadow
Неоновое свечение
Inset Shadow
inset
Внутренняя тень
Multi-Layer
layered shadows
Многослойная тень
Colored
colored shadow
Цветные тени
NEON TEXT
text-shadow
Неоновый текст
Neumorphism
neumorphism
Нейморфизм
Long Shadow
long shadow
Длинная тень
04 / Рамки

Borders & Outlines

Градиентные, анимированные, пунктирные и декоративные рамки

Gradient Border
border-image
Градиентная рамка
Animated Border
conic-gradient + animation
Анимированная рамка
Dashed
border-style
Пунктирная
Dotted Glow
dotted + glow
Точечная со свечением
Double
border-style: double
Двойная рамка
Outline Offset
outline-offset
Outline со сдвигом
05 / Анимации

CSS Animations

Bounce, spin, pulse, morphing, typewriter, wave и другие

@keyframes
Bounce
@keyframes
Spin
@keyframes
Pulse
@keyframes
Shake
@keyframes
Morphing
console.log("Hello!")
steps()
Typewriter
animation-delay
Audio Wave
transform-origin
Orbit
Front
Back
transform-style: preserve-3d
3D Flip
06 / Трансформации

CSS Transforms

Наведите мышь для демонстрации трансформаций

↻
rotate(45deg)
⬡
scale(1.3)
▱
skewX(15deg)
→
translateX(20px)
◈
perspective + rotateY
✦
rotate + scale
07 / Фильтры

CSS Filters

Наведите мышь чтобы убрать фильтр и увидеть оригинал

🏔️
blur(3px)
🌅
brightness(1.5)
🌊
contrast(2)
🌺
grayscale(100%)
🦋
sepia(100%)
🌈
hue-rotate(90deg)
🎨
saturate(3)
🌙
invert(100%)
⭐
drop-shadow()
🔥
combo filter
08 / Режимы смешивания

Mix-Blend-Mode

12 режимов наложения слоёв

multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
09 / Clip Path

CSS Clip-Path Shapes

Обрезка элементов в произвольные формы. Наведите мышь для анимации.

circle(50%)
ellipse()
Треугольник
Ромб
Пентагон
Гексагон
Звезда
Стрелка
Крест
Сообщение
10 / Типографика

Text Effects

Градиентный текст, обводки, неон, 3D, глитч и другие эффекты

gradient text
Градиентный Текст
text-stroke
Обводка Текста
neon glow
Неоновый Текст
3D text-shadow
3D Текст
glitch effect
GLITCH EFFECT
animated gradient
Анимированный Градиент
11 / Паттерны

CSS Patterns

Фоновые узоры созданные только через CSS

Dots
Grid
Diagonal
Checkerboard
Zigzag
Hexagon
Triangles
Waves
12 / Hover эффекты

Hover Effects

Наведите мышь на карточки для демонстрации

Fill Up ↑
Shine ✨
Border Draw
Scale + Rotate
Neon Glow
Reveal
Ripple
3D Tilt
Color Shift
13 / Transitions

Timing Functions

Наведите мышь чтобы увидеть разницу функций плавности

Linear
linear
Ease
ease
Ease In
ease-in
Ease Out
ease-out
Ease In Out
ease-in-out
Elastic
cubic-bezier(0.68, -0.55, 0.265, 1.55)
Steps
steps(10)
Custom Bezier
cubic-bezier(0.25, 0.46, 0.45, 0.94)
14 / Фигуры

CSS Shapes

Геометрические фигуры через CSS

Круг
Квадрат
Squircle
Овал
Треугольник
Ромб
Параллелограмм
Кольцо
Полукруг
15 / Загрузчики

Loading Spinners

Анимированные индикаторы загрузки

16 / Backdrop Filter

Backdrop Filter Effects

Фильтры применяемые к фону под элементом

blur(10px)
saturate(300%)
brightness(0.5)
grayscale(100%)
contrast(200%)
Combined
17 / Scroll Snap

Scroll Snap

Прокрутите горизонтально — элементы "прилипают" к центру

Snap 1
Snap 2
Snap 3
Snap 4
Snap 5
Snap 6
18 / Бейджи

Badges & Pills

Различные стили бейджей и меток

Solid Outline Gradient Glass Pulse Glow
19 / Прогресс

Progress Bars

Разные стили индикаторов прогресса

20 / Псевдоэлементы

::before & ::after

Декоративные элементы через псевдоклассы

Ribbon
Декоративная лента в углу через ::before
Blockquote
Декоративная кавычка для цитат
Animated Underline
Подчёркивание при наведении через ::after
Tooltip
Подсказка через ::after (наведите мышь)
21 / Flexbox

Flexbox Layout

Основные раскладки Flexbox

justify-content: center
A
B
C
justify-content: space-between
A
B
C
justify-content: space-evenly
A
B
C
flex-direction: column
Row 1
Row 2
Row 3
22 / CSS Grid

Grid Layout

Продвинутые сетки CSS Grid

grid-template-columns: 1fr 2fr 1fr
1fr
2fr
1fr
1fr
2fr
1fr
grid-template-areas
Header
Sidebar
Main Content
Footer
grid-column: span
1
span 2
4
span 3
6
23 / Aspect Ratio

Aspect Ratios

Фиксированные пропорции элементов

1:1
16:9
4:3
21:9
3:2
24 / Курсоры

CSS Cursors

Наведите мышь чтобы увидеть разные курсоры

default
pointer
crosshair
move
text
wait
help
not-allowed
grab
zoom-in
zoom-out
col-resize
row-resize
nesw-resize
cell
none
25 / Формы

Form Elements

Стилизация элементов форм

26 / CSS Variables

Custom Properties

Цветовая палитра через CSS переменные

Primary
--primary: #6c5ce7
Accent
--accent: #fd79a8
Secondary
--secondary: #00cec9
Warning
--warning: #fdcb6e
Danger
--danger: #e17055
Info
--info: #a29bfe
27 / Multi-Column

CSS Columns

Многоколоночная верстка текста как в газетах

CSS Multi-Column Layout позволяет разбить контент на несколько колонок, подобно газетной или журнальной верстке.

Свойство column-count задает количество колонок, а column-gap — расстояние между ними.

Column-rule добавляет вертикальную линию-разделитель между колонками для визуального разделения.

Break-inside: avoid предотвращает разрыв элемента между колонками.

Это один из самых недооценённых инструментов CSS, идеально подходящий для текстовых блоков.

Колонки автоматически балансируют высоту, распределяя содержимое равномерно.

28 / Z-Index

Stacking Context

Наложение элементов через z-index

z-index: 1
z-index: 2
z-index: 3
z-index: 4
29 / Writing Mode

Writing Modes

Различные направления текста

Horizontal (default)
Vertical RL
Vertical LR
30 / CSS Counters

Auto Numbering

Автоматическая нумерация через CSS счётчики

  1. Градиенты — основа любого дизайна
  2. Стекломорфизм — тренд 2024-2025
  3. Тени создают глубину и объём
  4. Анимации оживляют интерфейс
  5. Трансформации — мощный инструмент
  6. Фильтры меняют визуальное восприятие
31 / Responsive

Media Queries

Брейкпоинты для адаптивного дизайна

📱
Mobile
< 576px
📱
Mobile L
576px – 768px
📋
Tablet
768px – 1024px
💻
Laptop
1024px – 1440px
🖥️
Desktop
> 1440px
32 / Resize

Resizable Container

Потяните за правый нижний угол

Этот контейнер можно ресайзить!

Свойство CSS resize: both позволяет пользователю изменять размеры элемента. Используется для textarea и пользовательских компонентов.