CSS-gradientgenerator
Genereer CSS-gradientcode door kleuren en hoeken te selecteren en bekijk een live preview
Kenmerken
Preview en code werken gelijktijdig bij
Uiterlijk en CSS veranderen tegelijk wanneer u kleuren of hoeken aanpast
Ondersteunt lineair, radiaal en kegelvorming
Stel hoek, vorm en centraal punt gedetailleerd in per type
Tot 10 kleuren aanpassen via slepen
Pas kleurpositie aan door op de balk te slepen, stel transparantie in met schuifregelaar
8 voorbeeldkleurstelling en willekeurig genereren
Begin met standaardkleuren of willekeurig gegenereerde kleuren en maak fijne aanpassingen
Gebruiksaanwijzing
Selecteer een type
Kies het gradïënttype uit lineair, radiaal of kegelvorming
Kies kleuren
Selecteer kleuren via kleurcode of voorbeelden, voeg kleuren toe met 'Kleur toevoegen' en stel positie en transparantie in
Pas richting aan
Voor lineair: stel hoek of richtingsknoppen in; voor radiaal/kegelvorming: geef centraal punt op
Kopieer de code
Klik 'Kopiëren' om één regel CSS naar uw stijlen te plakken
Gebruiksscenario's
Achtergrond van een heroafbeelding maken
Bepaal achtergrondkleur van site-top of knop zonder code te schrijven
Kleurkeuze voor blogkoppen
Selecteer kleuren uit voorbeelden om artikelkoppeachtergronden in te stellen
Overlay over foto's
Maak semi-transparante laag door kleur met lagere transparantie over foto's te leggen
Aanpassing van multi-kleurgradiënten
Sleep grenzen tussen 3+ kleuren stap voor stap dichter bij elkaar
Basiskennis
Verschil tussen linear, radial en conic
CSS-gradiënten hebben 3 functies met verschillende kleurveranderingen; allemaal worden ze geschreven in de background-eigenschap.
- linear-gradient：linear-gradient is een lineaire gradiënt waarin de kleur verandert langs een rechte lijn onder een opgegeven hoek.
- radial-gradient：radial-gradient is een radiale gradiënt waarin de kleur van het middelpunt naar buiten spreidt in een cirkel- of ovaalvorm.
- conic-gradient：conic-gradient is een kegelvormigegradiënt waar de kleur met de klok mee om het middelpunt heen verandert.
Correspondentie tussen hoek en richtingstrefwoorden
De hoek van linear-gradient begint op 0deg (omhoog gericht) en draait met de klok mee naarmate de waarde stijgt. U kunt hoeken ook schrijven als richtingstrefwoorden zoals 'to right'; 90deg is gelijk aan 'to right', 180deg aan 'to bottom'.
Kleurstop en transparantienotatie
Een kleurstop (color stop) is de positie in een gradiënt waar die kleur voorkomt; 0% is het startpunt en 100% het eindpunt. Bijvoorbeeld '#3B82F6 0%, #8B5CF6 100%' geeft een overgangvan blauw naar paars.
- #RRGGBB-indeling：#RRGGBB-indeling geeft kleurintensiteit voor rood, groen en blauw weer in 2-cijferige hexadecimalen; #FF0000 is ondoorzichtig rood.
- rgba-indeling：rgba-indeling voegt transparantie (0–1) toe aan rood-, groen- en blauwwaarden (0–255); transparantie 0,5 is halfdoorschijnend.
Veiligheid en privacy
Volledig in de browser
Ingevoerde gegevens worden alleen in uw browser verwerkt en niet naar buiten verzonden.
Verwerking alleen in browser
Gradïëntcodegeneratie vindt volledig in uw browser plaats, invoergegevens worden niet naar de server verzonden.
Communicatie versleuteld met HTTPS
Het laden van de pagina wordt ook versleuteld met TLS en de inhoud kan niet door derden worden gelezen.
Geen verzending naar derden
Invoergegevens worden niet naar externe services zoals advertentienetwerken of trackers verzonden.
Geen automatisch opslaan van resultaten
Gekozen kleuren en instellingen of invoersuggesties worden niet op de server opgeslagen.
Volg RAKKOTOOLS in Google Zoeken
185 handige tools worden gemakkelijker te vinden via Google Zoeken en AI-zoekopdrachten!
- Gevonden via zoekopdracht
- Ook weergegeven in AI-zoekopdrachten
- Nieuwe tools ontdekken
Updates
- update #312
CSS-verloopgenerator toegevoegd, selecteer kleuren en hoek om code te genereren
Aanbevolen tools
185 gratis webtools die u nu meteen kunt gebruiken!