Gradient CSS dla przycisków i kart — gotowe przepisy UI
Gradient w komponentach UI może podnieść projekt strony na wyższy poziom — od subtelnch przycisków po efektowne karty z gradientowym obramowaniem. W tym artykule zebraliśmy gotowe przepisy CSS z kodem do skopiowania, które możesz natychmiast zastosować w swoim projekcie. Każdy snippet generujesz i podglądaszu za pomocą Generatora Gradientów CSS na WikiPlus.
Gradientowe przyciski — przepisy CSS
Gradientowe przyciski są efektowne, ale wymagają uwagi przy stanach interakcji. Prosty gradient przycisk: `.btn-gradient { background: linear-gradient(135deg, #0011ff 0%, #7b00ff 100%); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; } .btn-gradient:hover { opacity: 0.85; } .btn-gradient:active { opacity: 0.7; transform: scale(0.98); }`. Efekt shimmer (błysk) na hover: dodaj ::after z linear-gradient od białego przezroczystego, animowany background-position. Gradient outline button: `background: white; border: 2px solid transparent; background-clip: padding-box; position: relative;` z ::before ustawionym na gradient. Przycisk z cieniem gradientowym: `box-shadow: 0 8px 20px rgba(0,17,255,0.4);`.
Karty z gradientem — różne style
Karty to jeden z najczęstszych komponentów, gdzie gradienty robią ogromną różnicę. Karta z gradientowym tłem: `.card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 16px; padding: 24px; color: white; }`. Karta glassmorphism: `background: rgba(255,255,255,0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px;` (wymaga tła rodzica z gradientem). Karta z gradientową nakładką na zdjęcie: `.card-img { position: relative; overflow: hidden; border-radius: 12px; } .card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); } .card-img .title { position: absolute; bottom: 16px; left: 16px; color: white; z-index: 1; }`. Karta z gradientowym obramowaniem i białym wnętrzem: border: 2px solid transparent + background: ... border-box.
Hero sekcja z gradientem — receptury
Hero sekcja jest pierwszym co widzi użytkownik — warto ją wyróżnić. Przepis 1 — gradient na ciemnym: `.hero { background: linear-gradient(135deg, #0a0a2e 0%, #1a0a4a 50%, #2a0a2e 100%); min-height: 100vh; display: grid; place-items: center; }`. Przepis 2 — kolorowy gradient lifestyle: `.hero { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); }` — pastelowy rainbow. Przepis 3 — gradient overlay na zdjęcie: `.hero { background: linear-gradient(135deg, rgba(0,17,255,0.9), rgba(123,0,255,0.7)), url(photo.jpg) center/cover; }`. Przepis 4 — gradient text hero: `h1 { font-size: clamp(2rem, 8vw, 6rem); background: linear-gradient(135deg, #0011ff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }` — wielki gradient tytuł.
Gradient na SVG, ikonach i dekoracjach
Gradienty nie ograniczają się do tła prostokątnych elementów. Gradienty SVG wewnątrz SVG: `<defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#0011ff"/><stop offset="100%" style="stop-color:#ff00ff"/></linearGradient></defs><path fill="url(#grad)" d="..."/>`. Gradient na ikonie SVG przez fill: currentColor + CSS color: gradient (z background-clip: text). Dekoracyjne blob shapes: element z border-radius bardzo zaokrąglonym + gradient background + filter: blur() dla miękkości. Separator sekcji: element `<div>` z CSS clip-path i gradient background — zamiast prostej linii. Animowany gradient jako loading indicator (pulsujący skeleton): gradient z animacją background-position symuluje flow.
Często zadawane pytania
- Dlaczego gradient nie wyświetla się na przycisku?
- Sprawdź czy nie masz nadpisania przez bardziej specyficzną regułę CSS. Sprawdź panel DevTools → Computed Styles dla background. Upewnij się, że gradient jest na właściwości background lub background-image, nie background-color (gradientu nie można ustawić jako background-color).
- Jak zmienić kolor gradientu na hover bez migotania?
- Nie animuj background-image — CSS nie interpoluje gradientów płynnie. Zamiast tego: (1) zmień opacity elementu lub pseudo-elementu, (2) użyj nakładki pseudo-element ::after z nowym gradientem animując opacity, (3) użyj CSS custom properties z @property i transition.
- Czy gradient CSS można użyć jako maski (mask-image)?
- Tak! CSS mask-image obsługuje gradienty: `mask-image: linear-gradient(to right, black, transparent)` — element zanika ku prawej. To elegancka technika dla efektu fade-out tekstu lub obrazu. -webkit-mask-image dla Safari.