Generator de gradiente CSS
Generează cod de gradiente CSS cu previzualizare în timp real, selectând doar culori și unghiuri
Caracteristici
Previzualizare și cod se actualizează simultan
Aspectul și CSS se schimbă imediat când modifici culori sau unghi
Suport pentru gradiente liniare, radiale și conice
Specificare detaliată pentru fiecare tip: unghi, formă, poziție centrală
Ajustare prin tragere pentru până la 10 culori
Poziționează culori pe bară prin tragere, reglează transparență cu glisor
8 mostre și generare aleatorie
Pornește de la palete standard sau aleatoare și ajustează detalii
Cum se folosește
Selectează tipul
Alege tipul de gradiente: liniar, radial sau conic
Setează culori
Selectează culori din cod sau mostre, adaugă culori suplimentare, ajustează poziție și transparență
Ajustează orientarea
Pentru liniar: unghi sau butoane direcție; pentru radial/conic: specifică poziția centrală
Copiază codul
Folosește butonul "Copiere" pentru a integra CSS-ul în stilurile tale
Cazuri de utilizare
Crearea fundalului pentru imagini hero
Setează culori de fundal pentru seturi și butoane fără a scrie cod
Alegerea paletei pentru titluri de blog
Selectează paleta similară din mostre pentru a crea fundaluri de titluri coerente
Suprapunere pe fotografii
Creează straturi semi-transparente colordate peste imagini prin reducerea opacității
Ajustarea gradientelor multi-culoare
Reglează fin poziția limitelor între 3 sau mai multe culori prin tragere
Cunoștințe de bază
Diferențele dintre linear, radial și conic
CSS oferă 3 funcții de gradiente cu moduri diferite de schimbare a culorilor, toate folosite în proprietatea background.
- linear-gradient：linear-gradient creează gradiente liniare unde culoarea se schimbă de-a lungul unei linii drepte la unghiul specificat.
- radial-gradient：radial-gradient creează gradiente radiale unde culoarea se extinde de la centru spre exterior în formă de cerc sau elipsă.
- conic-gradient：conic-gradient creează gradiente conice unde culoarea se schimbă în sensul acelor de ceasornic în jurul centrului.
Corespondența dintre unghi și cuvintele cheie de direcție
În linear-gradient, 0deg este direcția de jos în sus, iar valorile cresc în sensul acelor de ceasornic. Unghiurile pot fi exprimate și cu cuvinte cheie cum ar fi "to right": 90deg corespunde "to right", iar 180deg corespunde "to bottom".
Modul de scriere a punctelor de culoare și transparenței
Punctul de culoare (color stop) indică poziția unde o culoare se aplică în gradient: 0% este punctul de început, 100% este punctul de final. De exemplu, "#3B82F6 0%, #8B5CF6 100%" indică o tranziție de la albastru la violet.
- Format #RRGGBB：Formatul #RRGGBB exprimă culori prin valori hexazecimale pe 2 cifre pentru roșu, verde și albastru. #FF0000 reprezintă roșu opac.
- Format rgba：Formatul rgba adaugă transparență (0-1) valorilor RGB (0-255). O transparență de 0,5 reprezintă o culoare semi-transparentă.
Securitate și confidențialitate
Procesare în browser
Datele introduse sunt procesate doar în browserul dumneavoastră și nu sunt trimise în exterior.
Procesare doar în browser
Generarea codului de gradient se efectuează în întregime în browserul dvs., iar datele de intrare nu sunt trimise la server.
Comunicare criptată cu HTTPS
Încărcarea paginii este și ea criptată prin TLS, iar conținutul nu poate fi citit de terți.
Nicio transmisie către terți
Conținutul intrării nu este trimis serviciilor externe, cum ar fi rețele de publicitate sau tracked-uri.
Nicio salvare automată a rezultatelor
Culori și setări selectate și sugestiile de intrare nu sunt stocate pe server.
Urmărește RAKKOTOOLS în Google Search
185 instrumente utile devin mai ușor de găsit din Google Search și căutările AI!
- Se găsește în căutare
- Se afișează și în căutări AI
- Descoperă instrumente noi
Informații de actualizare
- update #312
Adăugat generator de gradiente CSS, selectează culori și unghi pentru a genera cod