Maak een lineair CSS-verloop

Met Verloopgenerator kunnen ontwerpers en front-endontwikkelaars een interface vóór implementatie afstemmen. Maak een lineair CSS-verloop.

Maak een lineair CSS-verloop. Je kunt het gratis in je browser gebruiken zonder account en het resultaat controleren voordat je verdergaat.

Hoe te gebruiken

Voer eerst de hoek van het verloop in graden in; die bepaalt in welke richting de kleuren over het element bewegen.
Voeg de startkleur op de volgende regel toe en de eindkleur daaronder.
Genereer het verloop: het resultaatgebied toont een regel CSS die u rechtstreeks in uw project kunt kopiëren.
Plak die regel in de regel waaraan u werkt en herlaad daarna de pagina om te zien hoe het er echt uitziet.
Wijzig de hoek of een kleur en genereer opnieuw zo vaak u wilt voordat u een definitieve stijl kiest.

Voorbeeld

Het voorbeeld gebruikt een hoek van 45 graden met een zeer donkerblauw aan het begin en een sterk groen aan het einde. Vergelijk na het genereren de verkregen regel met wat u in gedachten had: de hoek bepaalt de richting, terwijl de kleurvolgorde de tint aan elk uiteinde bepaalt.

Invoer

45
#0F172A
#16A34A

Resultaat

background: linear-gradient(45deg, #0F172A, #16A34A);

Limieten en formaten

Er worden alleen lineaire verloopvarianten geproduceerd; radiale, conische en herhalende varianten hebben een andere syntaxis nodig.
Twee kleuren geven een eenvoudige overgang, maar tussenstops kunnen vanaf deze pagina niet worden aangepast.
Het resultaat hangt af van het scherm en de browser van de bezoeker, en een zeer contrastrijke overgang kan vermoeiend zijn voor het oog wanneer er tekst overheen staat.
Controleer het contrast als u tekst over het verloop plaatst, want de leesbaarheid kan niet alleen aan de code worden beoordeeld.

Waar de verwerking gebeurt

Het verloop wordt in uw browser gegenereerd. De hoek en beide kleuren blijven op uw apparaat, er wordt niets verzonden en niets bewaard zodra u de pagina verlaat, dus het fragment dat u kopieert wordt volledig op uw eigen machine samengesteld.

Veelgestelde vragen

Kan ik de gegenereerde code in een andere regel hergebruiken?

Ja. De regel volgt de standaardsyntaxis voor een lineair verloop en past in elke achtergronddeclaratie. Kopieer hem zoals hij is en wijzig alleen de kleuren als uw palet later verandert.

Hoe krijg ik een verloop dat van boven naar beneden loopt?

Verschuif de hoek in kleine stappen en houd de waarde die uw eerste kleur boven in het element plaatst. Omdat het resultaat wordt gecontroleerd door de pagina te herladen, zijn een of twee pogingen meestal genoeg om de gewenste richting te vinden.

Kan ik meer dan twee kleuren gebruiken?

Deze pagina vertrekt van een begin- en een eindkleur, dus een overgang met drie tinten kan hier niet direct worden ingesteld. U kunt nog steeds een eerste paar genereren en daarna de extra stops met de hand in uw eigen stylesheet toevoegen.