VulCode

Gradient CSS

Przeciągasz punkty koloru, dostajesz background w CSS i klasę Tailwind.

Narzędzia: Grafika
Kategoria
Grafika
Cena
bezpłatne

Narzędzie uruchamia się w Twojej przeglądarce.

Wszystko liczy się w przeglądarce. Nic z tego, co wpiszesz, nie trafia na nasz serwer.

Jak użyć w trzech krokach

Narzędzie w schemacie, z przykładem z tej strony. Numer kroku stoi tam, gdzie go wykonujesz: w polach, przy wyniku albo poza narzędziem.

Gradient CSS
Co wpisujesz
Liniowy, 90 stopni, trzy kolory

  1. Wybierz typ gradientu i kąt.

  2. Dodaj i przeciągaj punkty koloru.

Co dostajesz
background: #61cafa; background: linear-gradient(90deg, #61cafa 0%, #2112fc 50%, #1679fa 100%);

  1. Skopiuj CSS albo klasę Tailwind.

Osiem gradientów i CSS, który z nich wychodzi

Narzędzie zawsze dopisuje pierwszy kolor jako zapasowe tło, a przy mieszaniu OKLCH daje dwie wersje gradientu: przeglądarka, która nie zna in oklch, zostaje przy zwykłej.

UstawienieOczekiwaneWynik narzędziaWynik
Ustawienieliniowy, 90 stopni, trzy koloryprzykład z opisu narzędzia
OczekiwanePierwszy kolor jako zapasowe tło, potem gradient
Wynik narzędziabackground: #61cafa; background: linear-gradient(90deg, #61cafa 0%, #2112fc 50%, #1679fa 100%);
Zgodne z oczekiwanym
Ustawieniepunkty dodane od końcakolejność kliknięć
OczekiwaneKolory w kolejności pozycji
Wynik narzędziabackground: #414df2; background: linear-gradient(90deg, #414df2 0%, #ff5ad1 100%);
Zgodne z oczekiwanym
Ustawieniepierwszy kolor w 50%przezroczystość
OczekiwaneOsiem cyfr hex: 50% to 80
Wynik narzędziabackground: #414df280; background: linear-gradient(90deg, #414df280 0%, #ff5ad1 100%);
Zgodne z oczekiwanym
Ustawienie#fff, #000skrócony zapis
OczekiwaneRozwinięte do sześciu cyfr
Wynik narzędziabackground: #ffffff; background: linear-gradient(90deg, #ffffff 0%, #000000 100%);
Zgodne z oczekiwanym
Ustawieniemieszanie OKLCHżywsze przejście
OczekiwaneWersja zwykła i druga z in oklch
Wynik narzędziabackground: #414df2; background: linear-gradient(90deg, #414df2 0%, #ff5ad1 100%); background: linear-gradient(90deg in oklch, #414df2 0%, #ff5ad1 100%);
Zgodne z oczekiwanym
Ustawieniekołowy ze środkakąt nie ma znaczenia
Oczekiwaneradial-gradient(circle at center, ...)
Wynik narzędziabackground: #414df2; background: radial-gradient(circle at center, #414df2 0%, #ff5ad1 100%);
Zgodne z oczekiwanym
Ustawienieklasa Tailwindwartość w nawiasach
OczekiwaneSpacje zamienione na podkreślenia
Wynik narzędziabg-[linear-gradient(90deg,#414df2_0%,#ff5ad1_100%)]
Zgodne z oczekiwanym
Ustawieniekolor wpisany słowemzły zapis
OczekiwaneBrak CSS, narzędzie prosi o poprawkę
Wynik narzędziaBrak wyniku
Zgodne z oczekiwanym

8 z 8 przypadków zgodnych z oczekiwanym

Pytania

Powiązane narzędzia

Narzędzie rozwiązuje jedno zadanie. Jeśli to samo ma się dziać automatycznie w Twoim bocie, serwerze albo systemie, zbudujemy to.

Brakuje narzędzia, którego potrzebujesz?

Napisz, co chcesz liczyć albo generować. Odpowiemy, czy wystarczy narzędzie, czy lepsza będzie integracja w Twoim systemie.