Анализ сайта http://css3.com/
Основное Готовность: 40%
Домен
css3.com
Состояние доменного имени
?
Проверяем корректность доменного имени и наличие технических проблем на уровне домена.
Домен второго уровня идеален для продвижения.
Отличный запоминающийся домен.
Ответ сервера
200 Успешный ответ
HTTP-код ответа и цепочка редиректов
?
Код 200 — страница доступна. Коды 3xx — редиректы (цепочки замедляют загрузку и размывают ссылочный вес). Коды 4xx/5xx — ошибки, поисковик не сможет проиндексировать страницу.
Сервер настроен корректно.
Безопасность
Сайт небезопасен
Использование HTTPS и SSL-сертификат
?
HTTPS — обязательный стандарт. Google и Яндекс отдают предпочтение защищённым сайтам. Отсутствие SSL или просроченный сертификат ведут к предупреждениям в браузере и снижению позиций.
На сайте не найден защищенный протокол ssl и сайт не открывается по https!
Не настроен HSTS (Strict-Transport-Security) — рекомендуется включить.
Поздравляем! Сайт не содержится в реестре РКН.
Кодировка
utf-8
Кодировка символов страницы
?
Стандарт — UTF-8. Неправильная кодировка вызывает нечитаемые символы и мешает поисковику корректно распознать текст страницы.
Указана кодировка на странице utf-8.
Язык
en
Атрибут lang в HTML-теге
?
Атрибут lang (<html lang="ru">) сообщает поисковикам и браузерам, на каком языке написана страница. Помогает при ранжировании в региональном поиске.
Язык документа указан явно: en.
Скорость загрузки
~0,81сек
Время отклика сервера (TTFB)
?
Time To First Byte — время до получения первого байта от сервера. Норма до 200 мс. Медленный отклик ухудшает пользовательский опыт и ранжирование: Яндекс и Google учитывают скорость страниц.
Скорость загрузки сайта 0,81сек оптимальна.
Объем документа
141Кб
Размер HTML-кода страницы
?
Слишком большой HTML замедляет парсинг браузером и сканирование поисковым роботом. Рекомендуется не более 200 Кб.
Объем html-документа 141Кб оптимален.
Структура html-документа корректна.
Ресурсы
Ресурсы: 11
Внешние ресурсы страницы (CSS, JS, изображения)
?
Количество и тип подключённых ресурсов влияют на скорость загрузки. Большое число запросов увеличивает время рендеринга страницы.
Кол-во файлов ресурсов 11 много для одной страницы. Приемлемо до 10. Проведите оптимизацию файлов ресурсов!
Показать полный список ресурсов
| Тип | Название | Значение |
|---|---|---|
| stylesheet | /_next/static/chunks/6233b0a694b3220d.css | |
| js | /_next/static/chunks/82abf2d65f5428ae.js | |
| js | /_next/static/chunks/f2f58a7e93290fbb.js | |
| js | /_next/static/chunks/38eb66a58ed5ffd7.js | |
| js | /_next/static/chunks/turbopack-27c50f4289ff97bb.js | |
| js | /_next/static/chunks/5ef39af00a763a56.js | |
| js | /_next/static/chunks/ff1a16fafef87110.js | |
| js | /_next/static/chunks/d2be314c3ece3fbe.js | |
| js | /_next/static/chunks/617ff333ecf00ae7.js | |
| js | /_next/static/chunks/a6dad97d9634a72d.js | |
| js | /_next/static/chunks/0de584b7d143baff.js |
Серверные заголовки
Кол-во: 10
HTTP-заголовки ответа сервера
?
Заголовки сервера передают браузеру и поисковику служебную информацию: кеширование, безопасность (CSP, HSTS), сжатие (gzip). Правильная настройка ускоряет загрузку и повышает защищённость.
Найдены серверные заголовки 10шт. Подробнее про серверные заголовки.
Показать полный список серверных заголовков
| Ключ | Значение |
|---|---|
| Server | nginx |
| Date | Fri, 21 Aug 2026 10:17:14 GMT |
| Connection | keep-alive |
| Vary | Accept-Encoding |
| x-nextjs-cache | HIT |
| x-nextjs-prerender | 1 |
| x-nextjs-stale-time | 300 |
| X-Powered-By | Next.js |
| Cache-Control | s-maxage=31536000 |
| ETag | "15rtt43h2b033xt" |
CMS
Не определена
Система управления сайтом (движок)
?
CMS — это движок, на котором работает сайт (WordPress, 1C-Bitrix, Tilda и др.). Знание CMS помогает понять возможности SEO-оптимизации и подобрать подходящие инструменты. «Не определена» — вероятно, самописный сайт или нестандартная сборка.
CMS не определена. Вероятно, сайт самописный либо движок надёжно скрыт. Это не ошибка.
Веб-сервер
nginx
Программное обеспечение сервера
?
Веб-сервер — это ПО, которое отдаёт страницы посетителям (nginx, Apache, IIS, LiteSpeed и др.). Определяется по серверным заголовкам ответа (Server, X-Powered-By и т.п.). «Не определён» — сервер намеренно скрывает эти заголовки, это нормальная практика безопасности.
Сайт работает на веб-сервере nginx.
Мета-теги Готовность: 62%
Title
css3.com - Free Developer Tools & Generators
Заголовок страницы в браузере и поисковой выдаче
?
Title — главный SEO-заголовок страницы. Влияет на CTR в поиске и ранжирование. Оптимальная длина: 50–70 символов. Ключевые слова — ближе к началу.
Необходимо уменьшить число символов в title (текущее значение: 48, оптимально: от 40 до 45)
Дублей словоформ в title не найдено.
Description
A free suite of frontend developer tools, HTML/CSS generators, layout builders, and utilities to simplify web development design.
Описание страницы в поисковой выдаче (сниппет)
?
Meta Description — текст под заголовком в выдаче. Напрямую на позиции не влияет, но влияет на CTR. Оптимальная длина: 120–160 символов.
Число символов в description 129 оптимально (норма: от 120 до 130).
Keywords
Список ключевых слов страницы (устаревший тег)
?
Meta Keywords не учитывается Яндексом и Google для ранжирования с 2009–2012 годов. Заполнение не обязательно, но не вредит. Конкурент может использовать содержимое для анализа.
Установите мета-тег keywords!
Канонический Url
Указывает поисковику основную версию страницы
?
Canonical (rel=canonical) предотвращает проблему дублей страниц. Должен точно совпадать с URL проверяемой страницы. Неправильный canonical может передать ссылочный вес на другую страницу.
Рекомендуем прописать канонический Url.
Robots
Ошибок нет
Директивы для поисковых роботов на уровне страницы
?
Meta Robots управляет индексацией конкретной страницы: index/noindex — индексировать ли, follow/nofollow — следовать ли по ссылкам. Noindex полностью исключает страницу из поиска.
Meta-тег robots не указан. Страница свободна для индексации.
Адаптивность
width=device-width, initial-scale=1
Настройка масштабирования на мобильных устройствах
?
Тег viewport (<meta name="viewport">) сообщает браузеру, как масштабировать страницу на мобильных. Стандарт: width=device-width, initial-scale=1. Отсутствие — признак отсутствия мобильной версии.
Meta-тег viewport со значением-константой width=device-width задаёт ширину страницы в соответствии с размером экрана.
Meta-тег viewport со значением initial-scale=1.0 определяет масштаб 1:1, т.е. «не масштабировать».
Разметка OpenGraph
Не найдено
Мета-теги для красивых превью в соцсетях
?
OpenGraph (og:title, og:description, og:image) управляет тем, как страница выглядит при репосте в социальных сетях и мессенджерах. Отсутствие OG-тегов — невзрачный превью при шеринге.
Разметка OpenGraph не задана. Страница не оптимизирована под социальные сети. Мета-теги с разметкой Og помогают социальным роботам лучше структурировать Ваш сайт.
Все мета-теги
Кол-во: 3
Полный список мета-тегов страницы
?
Таблица всех meta-тегов, включая нестандартные. Позволяет найти опечатки, дубли и лишние теги.
Найдены мета-теги 3шт. Мета-теги не видимы для человека и предназначены для обмена информацией между веб-страницей и поисковыми системами, браузерами и другими веб-службами. С ними роботы 🤖 и устройства ведут себя более ожидаемо.
Показать полный список мета-тегов
| Тип | Название | Значение |
|---|---|---|
| name | viewport | width=device-width, initial-scale=1 |
| name | next-size-adjust | |
| name | description | A free suite of frontend developer tools, HTML/CSS generators, layout builders, and utilities to simplify web development design. |
Оптимизация Готовность: 80%
Структура
Ошибок нет
Семантические HTML-элементы страницы
?
Проверяет наличие основных структурных элементов: nav, header, footer, main. Корректная семантическая структура помогает поисковику понять архитектуру страницы.
Структура документа корректна (теги <html> и <body> присутствуют по одному на документ).
Контент
Есть ошибки
Объём и качество текстового содержимого
?
Анализирует объём полезного текста на странице. Слишком мало — страница может считаться малополезной. Слишком много — ухудшается читаемость и восприятие.
Кол-во слов 561 не очень много. Добавьте побольше текста (хотя бы 800 слов)!
Слова из title 5 встречаются в тексте достаточно.
Абзацев с текстом 32 достаточно.
Среднее число слов в абзаце 10 достаточно.
Кол-во знаков контента 3790 на странице оптимально.
Заголовки
Ошибок нет
Иерархия заголовков H1–H6
?
H1 должен быть один и содержать ключевой запрос. H2–H6 описывают подразделы. Пропуск уровней (H1 → H3) и несколько H1 — типичные ошибки, снижающие понятность страницы для поисковика.
На странице присутствуют заголовки <h1> 1. Это прекрасно.
На странице присутствуют заголовки <h2> 4. Это хорошо.
На странице присутствуют заголовки <h3> 26.
Тошнота
3,16
Насколько одно слово доминирует в тексте
?
Классическая тошнота = √(частота самого повторяющегося слова). Норма до 7–8: текст воспринимается естественно. Выше — поисковик может счесть страницу переспамленной.
Тошнота превышает норму 3. Измените текст страницы!
Академич. тошнота
17,29%
Насколько текст перенасыщен ключевыми словами
?
Академическая тошнота = (частота слова / общее количество слов) × 100%. Показывает долю конкретного слова в тексте. Норма 5–15%.
Академическая тошнота превышает норму 5-15%. Измените текст страницы!
Семантическое ядро
20
Наиболее часто встречающиеся слова на странице
?
Топ слов по частоте использования. Показывает, какие слова доминируют в тексте с точки зрения поисковика.
Контент страницы содержит осмысленный текст и слова.
Показать список слов
| Слово | Кол-во | Частота |
|---|---|---|
| gradient | 10 | 1,78% |
| explore | 9 | 1,60% |
| generator | 9 | 1,60% |
| generators | 7 | 1,25% |
| builders | 6 | 1,07% |
| border | 5 | 0,89% |
| button | 5 | 0,89% |
| animations | 5 | 0,89% |
| download | 5 | 0,89% |
| animated | 5 | 0,89% |
| layouts | 4 | 0,71% |
| layout | 4 | 0,71% |
| preview | 4 | 0,71% |
| visual | 4 | 0,71% |
| animation | 4 | 0,71% |
| loading | 4 | 0,71% |
| create | 4 | 0,71% |
| shadow | 3 | 0,53% |
| glassmorphism | 3 | 0,53% |
| flexbox | 3 | 0,53% |
Индексация Готовность: 50%
Индексирование
Ошибок нет
Разрешено ли индексирование страницы
?
Проверяет, не закрыта ли страница от индексации через robots.txt, meta robots или X-Robots-Tag. Страница, закрытая от индексации, не появится в поисковой выдаче.
Анкоров на странице 56 оптимально. Поисковые роботы обязательно проиндексируют сайт.
Robots.txt
Не найден
Файл управления сканированием сайта роботами
?
Robots.txt указывает поисковым роботам, какие страницы сканировать, а какие — нет. Ошибки в файле могут случайно закрыть важные разделы от индексации.
Файл robots.txt не найден (ошибка 404). Крайне рекомендуем добавить файл robots.txt, это правило хорошего тона для поисковых роботов.
Sitemap
Кол-во: 0
XML-карта сайта для поисковиков
?
Sitemap.xml помогает поисковику быстрее находить и индексировать страницы. Особенно важен для крупных сайтов и новых страниц, на которые ещё нет входящих ссылок.
Robots.txt не содержит ссылку на карту сайта. Рекомендуется добавить карту сайта и указать ссылку на нее в robots.txt.
Внутренние ссылки
Кол-во: 54
Ссылки на другие страницы своего сайта
?
Внутренние ссылки распределяют ссылочный вес между страницами и помогают поисковику обходить сайт. Пустые анкоры и ссылки на запрещённые robots.txt страницы — типичные ошибки.
Внутренних ссылок на странице 54 оптимально.
Показать внутренние ссылки
| Url | Анкор | Состояние | Анализировать |
|---|---|---|---|
| / |
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#3fb950] to-[#58a6ff] flex items-center justify-center"><span class="font-black text-sm text-white">C3</span></div><span class="font-bold text-lg tracking-tight text-foreground hidden sm:inline-block">css3<span class="text-[#3fb950]">.com</span></span>
|
|
Анализировать url |
| /tools |
Tools
|
|
Анализировать url |
| /tools/generators |
Generators
|
|
Анализировать url |
| /tools/layouts |
Layouts
|
|
Анализировать url |
| /learn |
Learn
|
|
Анализировать url |
| /tools |
Explore Tools
|
|
Анализировать url |
| /tools/css-gradient-generator |
CSS Gradient
|
|
Анализировать url |
| /tools/box-shadow-generator |
Box Shadow
|
|
Анализировать url |
| /tools/border-radius-generator |
Border Radius
|
|
Анализировать url |
| /tools/glassmorphism-generator |
Glassmorphism
|
|
Анализировать url |
| /tools/neumorphism-generator |
Neumorphism
|
|
Анализировать url |
| /tools/text-shadow-generator |
Text Shadow
|
|
Анализировать url |
| /tools/clip-path-generator |
Clip Path
|
|
Анализировать url |
| /tools/css-shape-generator |
CSS Shape
|
|
Анализировать url |
| /tools/button-generator |
Button Generator
|
|
Анализировать url |
| /tools/flexbox-generator |
Flexbox Builder
|
|
Анализировать url |
| /tools/css-grid-generator |
CSS Grid Generator
|
|
Анализировать url |
| /tools/css-minifier |
CSS Minifier
|
|
Анализировать url |
| /tools/animation-keyframe-generator |
Keyframe Generator
|
|
Анализировать url |
| /tools |
Explore All Tools<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 h-4 w-4 shrink-0" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
|
Анализировать url |
| /tools/generators |
CSS Generators
|
|
Анализировать url |
| /showcase/gradient-card |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.gradient-card {
width: 320px;
height: 200px;
border-radius: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 32px;
color: #ffffff;
font-family: 'Segoe UI', sans-serif;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gradient-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(102, 126, 234, 0.5);
}
.gradient-card h3 {
font-size: 22px;
font-weight: 700;
margin: 0 0 8px 0;
}
.gradient-card p {
font-size: 14px;
opacity: 0.85;
margin: 0;
line-height: 1.5;
}
.gradient-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(30%, 30%); }
}
</style>
</head>
<body><div class="gradient-card">
<h3>Premium Plan</h3>
<p>Unlock all features with a beautifully designed gradient card component.</p>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Gradient Card</h3><p class="text-xs text-muted-foreground line-clamp-2">A sleek card with animated gradient background and glass border effect.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">gradient</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">card</span></div></div>
|
|
Анализировать url |
| /showcase/glassmorphism-card |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.glass-wrapper {
width: 360px;
height: 280px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 24px;
padding: 4px;
}
.glass-card {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 32px;
color: #ffffff;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.3s ease;
}
.glass-card:hover {
transform: scale(1.02);
}
.glass-card h3 {
font-size: 24px;
font-weight: 700;
margin: 0 0 12px 0;
}
.glass-card p {
font-size: 14px;
opacity: 0.8;
margin: 0;
line-height: 1.6;
}
</style>
</head>
<body><div class="glass-wrapper">
<div class="glass-card">
<h3>Glass Effect</h3>
<p>A beautiful frosted glass card that creates depth with backdrop-filter and semi-transparent layers.</p>
</div>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Glass Card</h3><p class="text-xs text-muted-foreground line-clamp-2">Frosted glass card with backdrop blur and luminous borders.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">glass</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">blur</span></div></div>
|
|
Анализировать url |
| /showcase/neon-button |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.neon-button {
padding: 16px 48px;
font-size: 16px;
font-weight: 700;
font-family: 'Segoe UI', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
color: #00ffaa;
background: transparent;
border: 2px solid #00ffaa;
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 255, 170, 0.3),
inset 0 0 15px rgba(0, 255, 170, 0.1);
}
.neon-button:hover {
color: #0a0a0a;
background: #00ffaa;
box-shadow: 0 0 30px rgba(0, 255, 170, 0.6),
0 0 60px rgba(0, 255, 170, 0.3),
0 0 100px rgba(0, 255, 170, 0.15);
text-shadow: none;
}
.neon-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,255,170,0.2), transparent);
animation: neon-sweep 2s ease-in-out infinite;
}
@keyframes neon-sweep {
0% { left: -100%; }
100% { left: 100%; }
}
</style>
</head>
<body><button class="neon-button">Explore</button></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Neon Glow Button</h3><p class="text-xs text-muted-foreground line-clamp-2">Cyberpunk-inspired button with animated neon glow and pulse effect.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">neon</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">button</span></div></div>
|
|
Анализировать url |
| /showcase/animated-border |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.border-card-wrapper {
position: relative;
width: 320px;
height: 200px;
border-radius: 20px;
padding: 3px;
background: conic-gradient(from 0deg, #3fb950, #58a6ff, #bc8cff, #f778ba, #f0883e, #3fb950);
animation: rotate-border 4s linear infinite;
background-size: 100% 100%;
}
@keyframes rotate-border {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
.border-card-inner {
width: 100%;
height: 100%;
background: #161b22;
border-radius: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
color: #e6edf3;
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
.border-card-inner h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px 0;
}
.border-card-inner p {
font-size: 13px;
color: #8b949e;
margin: 0;
line-height: 1.5;
}
</style>
</head>
<body><div class="border-card-wrapper">
<div class="border-card-inner">
<h3>Rainbow Border</h3>
<p>A rotating conic-gradient creates a mesmerizing animated border effect.</p>
</div>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Animated Border</h3><p class="text-xs text-muted-foreground line-clamp-2">Card with a rotating gradient border animation using conic-gradient.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">border</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">animation</span></div></div>
|
|
Анализировать url |
| /showcase/loading-spinner |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.spinner-container {
width: 80px;
height: 80px;
position: relative;
}
.spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid transparent;
}
.spinner-ring.outer {
border-top-color: #3fb950;
border-right-color: #58a6ff;
animation: spin 1.2s linear infinite;
}
.spinner-ring.inner {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-bottom-color: #bc8cff;
border-left-color: #f778ba;
animation: spin 0.8s linear infinite reverse;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner-label {
display: block;
text-align: center;
margin-top: 16px;
font-size: 13px;
color: #8b949e;
font-family: 'Segoe UI', sans-serif;
letter-spacing: 1px;
}
</style>
</head>
<body><div style="display:flex;flex-direction:column;align-items:center;">
<div class="spinner-container">
<div class="spinner-ring outer"></div>
<div class="spinner-ring inner"></div>
</div>
<span class="spinner-label">Loading...</span>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">CSS Loading Spinner</h3><p class="text-xs text-muted-foreground line-clamp-2">Elegant dual-ring loading spinner made entirely with CSS.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">spinner</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">loading</span></div></div>
|
|
Анализировать url |
| /showcase/gradient-text |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.gradient-text {
font-family: 'Segoe UI', sans-serif;
font-size: 48px;
font-weight: 900;
letter-spacing: -1px;
background: linear-gradient(135deg, #3fb950, #58a6ff, #bc8cff, #f778ba, #f0883e);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-flow 4s ease infinite;
text-align: center;
line-height: 1.2;
}
@keyframes gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-sub {
font-family: 'Segoe UI', sans-serif;
font-size: 16px;
color: #8b949e;
text-align: center;
margin-top: 12px;
}
</style>
</head>
<body><div>
<div class="gradient-text">CSS is Beautiful</div>
<div class="gradient-sub">Animated gradient text effect using background-clip</div>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Gradient Text</h3><p class="text-xs text-muted-foreground line-clamp-2">Bold animated gradient text with smooth color shifting.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">text</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">gradient</span></div></div>
|
|
Анализировать url |
| /showcase/3d-card |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.card-3d-container {
perspective: 800px;
width: 300px;
height: 200px;
}
.card-3d {
width: 100%;
height: 100%;
background: linear-gradient(145deg, #1a1f35, #0f1525);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 28px;
color: #e6edf3;
font-family: 'Segoe UI', sans-serif;
transform: rotateX(0deg) rotateY(0deg);
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}
.card-3d:hover {
transform: rotateX(-8deg) rotateY(12deg) scale(1.03);
box-shadow: -15px 15px 50px rgba(88,166,255,0.15);
}
.card-3d h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #58a6ff;
}
.card-3d p {
font-size: 13px;
color: #8b949e;
margin: 0;
line-height: 1.6;
}
.card-3d::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(88,166,255,0.08), transparent 50%);
pointer-events: none;
}
</style>
</head>
<body><div class="card-3d-container">
<div class="card-3d">
<h3>3D Transform</h3>
<p>Hover over this card to see a smooth 3D perspective tilt effect using CSS transforms.</p>
</div>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">3D Hover Card</h3><p class="text-xs text-muted-foreground line-clamp-2">Card with 3D perspective tilt effect on hover using CSS transforms.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">3d</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">transform</span></div></div>
|
|
Анализировать url |
| /showcase/pulse-badge |
<div class="h-[180px] bg-[#0d1117] overflow-hidden relative"><iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#0d1117;
font-family:'Segoe UI',system-ui,sans-serif;
overflow:hidden;
transform:scale(0.5);
transform-origin:center center;
}
.badge-group {
display: flex;
gap: 24px;
align-items: center;
font-family: 'Segoe UI', sans-serif;
}
.badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
.badge-success {
background: rgba(63, 185, 80, 0.15);
color: #3fb950;
border: 1px solid rgba(63, 185, 80, 0.3);
}
.badge-warning {
background: rgba(210, 153, 34, 0.15);
color: #d29922;
border: 1px solid rgba(210, 153, 34, 0.3);
}
.badge-danger {
background: rgba(248, 81, 73, 0.15);
color: #f85149;
border: 1px solid rgba(248, 81, 73, 0.3);
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
}
.badge-success .badge-dot { background: #3fb950; }
.badge-warning .badge-dot { background: #d29922; }
.badge-danger .badge-dot { background: #f85149; }
.badge-dot::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
animation: pulse-ring 1.5s ease-out infinite;
}
.badge-success .badge-dot::before { border: 2px solid #3fb950; }
.badge-warning .badge-dot::before { border: 2px solid #d29922; }
.badge-danger .badge-dot::before { border: 2px solid #f85149; }
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2); opacity: 0; }
}
</style>
</head>
<body><div class="badge-group">
<span class="badge badge-success"><span class="badge-dot"></span> Online</span>
<span class="badge badge-warning"><span class="badge-dot"></span> Away</span>
<span class="badge badge-danger"><span class="badge-dot"></span> Busy</span>
</div></body>
</html>" class="w-full h-full border-0 pointer-events-none" title="Preview"></iframe><div class="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="p-4 space-y-2 border-t border-border/40"><h3 class="font-semibold text-sm group-hover:text-[#3fb950] transition-colors">Animated Badge</h3><p class="text-xs text-muted-foreground line-clamp-2">Notification badge with pulsing ring animation and status indicator.</p><div class="flex items-center gap-2 pt-1"><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">badge</span><span class="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">animation</span></div></div>
|
|
Анализировать url |
| /tools |
View all<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
|
Анализировать url |
| /tools/css-gradient-generator |
<div class="h-1 bg-gradient-to-r from-green-400 to-blue-500 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Gradient Generator</h3><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-[#f0883e]/15 text-[#f0883e]">Popular</span></div><p class="text-sm text-muted-foreground leading-relaxed">Create beautiful linear and radial gradient backgrounds</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/box-shadow-generator |
<div class="h-1 bg-gradient-to-r from-gray-400 to-gray-600 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Box Shadow Generator</h3></div><p class="text-sm text-muted-foreground leading-relaxed">Visually design box shadows with blur, spread, and inset</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/glassmorphism-generator |
<div class="h-1 bg-gradient-to-r from-sky-300 to-blue-500 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Glassmorphism Generator</h3><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-[#bc8cff]/15 text-[#bc8cff]">Trending</span></div><p class="text-sm text-muted-foreground leading-relaxed">Create frosted glass effects with backdrop-filter blur</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/flexbox-generator |
<div class="h-1 bg-gradient-to-r from-blue-400 to-indigo-500 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Flexbox Builder</h3></div><p class="text-sm text-muted-foreground leading-relaxed">Build flex layouts with direction, justify, align controls</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/button-generator |
<div class="h-1 bg-gradient-to-r from-orange-400 to-red-500 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Button Generator</h3><span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-[#3fb950]/15 text-[#3fb950]">New</span></div><p class="text-sm text-muted-foreground leading-relaxed">Design custom buttons with colors, hover effects, transitions</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/clip-path-generator |
<div class="h-1 bg-gradient-to-r from-indigo-400 to-purple-600 opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="p-5 flex flex-col gap-3"><div class="flex items-center justify-between"><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Clip Path Generator</h3></div><p class="text-sm text-muted-foreground leading-relaxed">Create shapes with clip-path polygons, circles, and presets</p><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-1">Open tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/generators |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#3fb95015;color:#3fb950"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paint-bucket h-6 w-6" aria-hidden="true"><path d="M11 7 6 2"></path><path d="M18.992 12H2.041"></path><path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595"></path><path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33"></path></svg></div><span class="text-xs font-semibold bg-secondary px-2.5 py-1 rounded-full text-muted-foreground">9<!-- --> tools</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Generator Tools</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Generate gradients, shadows, glassmorphism, neumorphism, shapes, and more with live visual controls.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/layouts |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#58a6ff15;color:#58a6ff"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid h-6 w-6" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg></div><span class="text-xs font-semibold bg-secondary px-2.5 py-1 rounded-full text-muted-foreground">2<!-- --> tools</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Layout Builders</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Visual builders for Flexbox and CSS Grid. Build responsive layouts interactively.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/animations |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#f0883e15;color:#f0883e"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-6 w-6" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><span class="text-xs font-semibold bg-secondary px-2.5 py-1 rounded-full text-muted-foreground">1<!-- --> tools</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Animations</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Create keyframe animations with presets, timing controls, and live preview.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/optimization |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#39d2c015;color:#39d2c0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box h-6 w-6" aria-hidden="true"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg></div><span class="text-xs font-semibold bg-secondary px-2.5 py-1 rounded-full text-muted-foreground">1<!-- --> tools</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Optimization</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Minify and compress your CSS code for best performance and faster loading.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools/utilities |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#f778ba15;color:#f778ba"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-6 w-6" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg></div><span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-[#d29922]/15 text-[#d29922]">Coming Soon</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Developer Utilities</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Calculators, converters, and media query generators for your workflow.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /learn |
<div class="p-5 flex flex-col gap-4 h-full"><div class="flex items-center justify-between"><div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color:#bc8cff15;color:#bc8cff"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open h-6 w-6" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div><span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-[#d29922]/15 text-[#d29922]">Coming Soon</span></div><div><h3 class="font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Learning & Reference</h3><p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">Visual guides, property explorers, cheat sheets, and interactive tutorials.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors mt-auto pt-2">Explore<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
Анализировать url |
| /tools |
Start Building Now<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
|
Анализировать url |
| / |
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-[#3fb950] to-[#58a6ff] text-white font-extrabold text-sm">C3</div><span class="text-lg font-bold tracking-tight text-foreground group-hover:text-[#3fb950] transition-colors">css3.com</span>
|
|
Анализировать url |
| /tools/generators |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paint-bucket h-3.5 w-3.5 text-[#3fb950]" aria-hidden="true"><path d="M11 7 6 2"></path><path d="M18.992 12H2.041"></path><path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595"></path><path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33"></path></svg><span class="truncate">CSS Generators</span>
|
|
Анализировать url |
| /tools/layouts |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard h-3.5 w-3.5 text-[#58a6ff]" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg><span class="truncate">Layout Builders</span>
|
|
Анализировать url |
| /tools/animations |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-3.5 w-3.5 text-[#f0883e]" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span class="truncate">CSS Animations</span>
|
|
Анализировать url |
| /tools/optimization |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor h-3.5 w-3.5 text-[#39d2c0]" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg><span class="truncate">Optimization</span>
|
|
Анализировать url |
| /tools |
<span class="truncate">View All Tools →</span>
|
|
Анализировать url |
| /about |
About Us
|
|
Анализировать url |
| /contact |
Contact Us
|
|
Анализировать url |
| /privacy-policy |
Privacy Policy
|
|
Анализировать url |
| /cookie-policy |
Cookie Policy
|
|
Анализировать url |
| /terms-of-use |
Terms of Use
|
|
Анализировать url |
Внешние ссылки
Кол-во: 2
Ссылки на сторонние сайты
?
Исходящие внешние ссылки передают часть ссылочного веса на чужие сайты. Ссылки на авторитетные ресурсы безопасны; ссылки на мусорные сайты могут навредить репутации страницы.
Внешних ссылок на странице 2 оптимально.
Показать внешние ссылки
| Url | Анкор | Анализировать |
|---|---|---|
| github.com |
<svg class="w-4 h-4" fill="currentColor" viewbox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
|
Анализировать url |
| twitter.com |
<svg class="w-4 h-4" fill="currentColor" viewbox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
|
Конкуренты Готовность: 0%
Конкуренты в Яндексе
Кол-во: 0
Топ сайтов-конкурентов в Яндексе
?
Сайты, чаще всего появляющиеся в ТОПе Яндекса по запросам из семантического ядра этой страницы.
Мы не нашли у вас конкурентов в Яндексе. Сайт или очень молодой или плохо продвигается.
Конкурентов в ТОП-10 Яндекса не нашлось.
Конкуренты в Google
Кол-во: 0
Топ сайтов-конкурентов в Google
?
Сайты, чаще всего появляющиеся в ТОПе Google по запросам из семантического ядра этой страницы.
Конкуренты в Google тоже не найдены. Займитесь продвижением сайта!
Конкурентов в ТОП-10 Google не нашлось.
ЗоЗПП: права потребителей Готовность: 100%
Нарушения
Не выявлены
Признаков дистанционной продажи товаров (интернет-магазина) не обнаружено — требования ЗоЗПП о раскрытии информации продавца к сайту не применяются. Нарушений нет.
ФЗ-149: рекомендательные технологии Готовность: 100%
Нарушения
Не выявлены
Рекомендательные блоки («с этим покупают», «похожие товары» и т.п.) на сайте не обнаружены — требования ст. 10.7 ФЗ-149 к сайту не применяются. Нарушений нет.
ФЗ-38: реклама Готовность: 100%
Нарушения
Не выявлены
Рекламных тематик с обязательными оговорками (медицина, БАД, кредиты и займы, новостройки) на сайте не обнаружено. Нарушений нет.
ФЗ-436: защита детей Готовность: 100%
Нарушения
Не выявлены
Признаков информационной продукции (новости, видео, книги, игры, курсы) не обнаружено — обязательная возрастная маркировка по ФЗ-436 сайту не требуется. Нарушений нет.
Вердикт
Таким сайт http://css3.com/ видят поисковые системы. Процент оптимизации невысокий - 58%. Чтобы улучшить сайт и попасть в ТОП необходимо:
Постарайтесь исправить общие ошибки.
Исправьте ошибки в мета-тегах.
Исправьте ошибки индексации.
Поделитесь с друзьями: