Generator gradientów CSS
Twórz liniowe i radialne gradienty CSS. Wybieraj kolory w sposób wizualny i kopiuj wygenerowany kod CSS.
background: linear-gradient(135deg, #535beb, #7c3aed);
Jak korzystać z tego narzędzia
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
Czym jest generator gradientów CSS?
Gradienty CSS to przejścia kolorystyczne między dwoma lub więcej kolorami. Gradienty liniowe płyną w jednym kierunku; radialne emanują z punktu. Ten generator obejmuje typowe przypadki; w przypadku złożonych gradientów z wieloma punktami zatrzymania i niestandardowymi pozycjami twórz je ręcznie.
Typowe przypadki użycia
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Najczęściej zadawane pytania
Czy gradienty są wydajne?▼
Czy mogę animować gradienty?▼
Powiązane narzędzia
Konwerter kolorów (HEX/RGB/HSL)
Konwertuj kolory między formatami HEX, RGB i HSL. Wybierz kolor wizualnie lub wprowadź wartości ręcznie.
Generator box-shadow CSS
Twórz wizualnie wartości box-shadow w CSS. Podgląd w czasie rzeczywistym i kopiowanie wygenerowanego CSS.
Generator krzywych przyspieszenia cubic-bezier
Twórz krzywe przyspieszenia cubic-bezier dla CSS. Zawiera standardowe ustawienia predefiniowane.
Generator palet kolorów
Generuj harmonijne palety kolorów z dowolnego koloru bazowego. Obsługuje schematy dopełniające, analogiczne, triadyczne i monochromatyczne.
Generator border-radius CSS
Twórz wizualnie złożone wartości border-radius w CSS. Niezależna kontrola każdego rogu.
Generator CSS clamp()
Generuj płynne, responsywne wartości CSS za pomocą clamp(). Skaluje się gładko między rozmiarem minimalnym a maksymalnym w zakresach widoku.