This media is not supported in your browser
VIEW IN TELEGRAM
Як зробити градієнтний текст у CSS за кілька рядків
В основі трюку — властивість background-clip. Вона визначає, як фон (зображення або колір) обмежується межами елемента. Якщо вказати background-clip: text, фон буде «обрізано» по формі символів, тобто градієнт заповнить саме контур тексту.
Ще один важливий крок — зробити сам колір тексту прозорим, щоб було видно фон. Для цього використовується -webkit-text-fill-color: transparent (плюс додатково color: transparent для сумісності).
Приклад стилю для заголовка:
Все про розробку 👉 ПІДПИСАТИСЬ
В основі трюку — властивість background-clip. Вона визначає, як фон (зображення або колір) обмежується межами елемента. Якщо вказати background-clip: text, фон буде «обрізано» по формі символів, тобто градієнт заповнить саме контур тексту.
Ще один важливий крок — зробити сам колір тексту прозорим, щоб було видно фон. Для цього використовується -webkit-text-fill-color: transparent (плюс додатково color: transparent для сумісності).
Приклад стилю для заголовка:
h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Все про розробку 👉 ПІДПИСАТИСЬ
🗞️ Дайджест новин та статей зі світу Frontend розробки за 30.03.2026:
🔹 Головна риса, на яку звертають увагу компанії під час технічної співбесіди - читати
🔹 Короткі новини № 116 - читати
🔹 Напевно, вам не потрібно виводити стан - читати
🔹 Головна риса, на яку звертають увагу компанії під час технічної співбесіди - читати
🔹 Короткі новини № 116 - читати
🔹 Напевно, вам не потрібно виводити стан - читати
Frontend Masters
The Top Trait Companies Look For in a Technical Interview
Hi 👋 — I am Abishek Jakhar. I work as a Senior Software Engineer at Coinbase, and I also run my product called FrontPrep, which helps candidates prepare for frontend engineer interviews. I have interviewed many candidates in my professional career at Coinbase…
🗞️ Дайджест новин та статей зі світу Frontend розробки за 31.03.2026:
🔹 Гра «Динозавр» у Chrome, створена виключно за допомогою CSS - читати
🔹 Гра «Динозавр» у Chrome, створена виключно за допомогою CSS - читати
Css-Tip
CSS-only Chrome Dino Game
Recreating the famous Dino game by Google using pure CSS, and playable with the keyboard
🗞️ Дайджест новин та статей зі світу Frontend розробки за 01.04.2026:
🔹 Короткі новини № 117 - читати
🔹 Випуски Node.js 25.9.0 (поточна версія) - читати
🔹 Короткі новини № 117 - читати
🔹 Випуски Node.js 25.9.0 (поточна версія) - читати
CSS-Tricks
Quick Hit #117 | CSS-Tricks
Safari TP 240 becomes the first to ship the revert-rule CSS keyword, which rolls the rule back to when it didn’t have its current value.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 02.04.2026:
🔹 Ефект розкриття з плавним «витіканням рідини» - читати
🔹 Ефект розкриття з плавним «витіканням рідини» - читати
Css-Tip
A Sliding "Liquid Oozing" Reveal Effect
A fancy reveal animation powered by clip-path: shape()
🗞️ Дайджест новин та статей зі світу Frontend розробки за 03.04.2026:
🔹 Меню деталізації з параметрами «Details» та «@scope» - читати
🔹 Меню деталізації з параметрами «Details» та «@scope» - читати
Frontend Masters
The Drill-Down Menu with Details and @scope
We’re going to build a set of nested <details> elements that behave like nested menus. Click a top-level link, drill down into a submenu, which can drill down into another submenu, etc. Think of them as nesting dolls… without the shrinking size. We take off…
🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.04.2026:
🔹 Що потрібно знати про JavaScript (видання 2026 року) - читати
🔹 Короткі новини № 119 - читати
🔹 Що потрібно знати про JavaScript (видання 2026 року) - читати
🔹 Короткі новини № 119 - читати
Frontend Masters
What To Know in JavaScript (2026 Edition)
We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…
🗞️ Дайджест новин та статей зі світу Frontend розробки за 07.04.2026:
🔹 Давайте розгадувати головоломки! - читати
🔹 Давайте розгадувати головоломки! - читати
🗞️ Дайджест новин та статей зі світу Frontend розробки за 08.04.2026:
🔹 Давайте змінимо вигляд веб-сторінок за допомогою властивості border-shape! - читати
🔹 Давайте змінимо вигляд веб-сторінок за допомогою властивості border-shape! - читати
Css-Tip
Let's Reshape the Web using border-shape!
A new property to easily create CSS shapes while preserving borders, shadows, outlines, etc
🔥1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 09.04.2026:
🔹 Короткі новини № 120 - читати
🔹 Контейнери, що містять лише імена: необхідний обсяг дії - читати
🔹 Короткі новини № 120 - читати
🔹 Контейнери, що містять лише імена: необхідний обсяг дії - читати
CSS-Tricks
Quick Hit #120 | CSS-Tricks
Chrome 147 ships contrast-color() (the Color Level 5 version that only resolves to black or white), making it baseline.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 10.04.2026:
🔹 Посібник із фільтрів SVG: Основи для початківців - читати
🔹 Короткі новини № 121 - читати
🔹 Посібник із фільтрів SVG: Основи для початківців - читати
🔹 Короткі новини № 121 - читати
Frontend Masters
SVG Filters Guide: Getting Started with the Basics
Visual effects like those produced by SVG <filter>s used to live in the “here be dragons” zone for me. I’m more of a tech, not an artist, so I usually steer clear of anything designery like UI, layout, typography, etc. My strength lies in building compact…
🗞️ Дайджест новин та статей зі світу Frontend розробки за 13.04.2026:
🔹 Як я втратив MadCSS - читати
🔹 Короткий огляд № 122 - читати
🔹 Як я втратив MadCSS - читати
🔹 Короткий огляд № 122 - читати
Frontend Masters
How I Lost MadCSS
I was very lucky to get to compete in Syntax’s MadCSS Battle recently. I got rightfully ousted in the 2nd round by Scott himself! See the outcome of the battle in the image below.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 14.04.2026:
🔹 Перетворення складних фігур SVG у CSS - читати
🔹 Перетворення складних фігур SVG у CSS - читати
Css-Tip
Convert Complex SVG Shapes into CSS
An SVG-to-CSS converter to easily transform SVG shapes into CSS shapes
🗞️ Дайджест новин та статей зі світу Frontend розробки за 15.04.2026:
🔹 Інтерфейс, створений за допомогою штучного інтелекту, за замовчуванням є недоступним - читати
🔹 Інтерфейс, створений за допомогою штучного інтелекту, за замовчуванням є недоступним - читати
Frontend Masters
AI-Generated UI Is Inaccessible by Default
A five-layer enforcement system for semantic correctness in LLM-generated React components
🗞️ Дайджест новин та статей зі світу Frontend розробки за 16.04.2026:
🔹 Вам варто відвідати наш безкоштовний семінар «Claude Code Deep Dive» з Лідією Халлі, і ось чому - читати
🔹 Випуски Node.js 24.15.0 (LTS) - читати
🔹 Вам варто відвідати наш безкоштовний семінар «Claude Code Deep Dive» з Лідією Халлі, і ось чому - читати
🔹 Випуски Node.js 24.15.0 (LTS) - читати
Frontend Masters
You Should Take Our Free Workshop “Claude Code Deep Dive” with Lydia Hallie and Here’s Why
The conversation about AI and coding work is full of highs.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 18.04.2026:
🔹 Випущено ESLint v10.2.1 - читати
🔹 Випущено ESLint v10.2.1 - читати
eslint.org
ESLint v10.2.1 released - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 20.04.2026:
🔹 Створення блогу в TanStack (Частина 1 з 2) - читати
🔹 Чому я більше не використовую ланцюжки в JavaScript - читати
🔹 Підкреслення, намальоване вручну, з використанням властивості border-shape - читати
🔹 Створення блогу в TanStack (Частина 1 з 2) - читати
🔹 Чому я більше не використовую ланцюжки в JavaScript - читати
🔹 Підкреслення, намальоване вручну, з використанням властивості border-shape - читати
Frontend Masters
Building a Blog in TanStack (Part 1 of 2)
TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…