CSS Gradient Generator
Create CSS gradients
Create CSS gradients Wordt lokaal uitgevoerd in uw browser
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
De CSS Gradient Generator bouwt een echte lineaire of radiale gradiënt op vanuit twee kleuren en een hoek, toont deze op volledige grootte en overhandigt u de CSS. De hoek is het deel dat mensen verkeerd interpreteren: in CSS wijst 0 graden naar boven en draait de richting met de klok mee, dus 90 graden loopt van links naar rechts en 180 graden loopt van boven naar beneden. Als we dat verkeerd begrijpen, ziet een verloop er de eerste keer vaak ondersteboven uit. Beide kleuren kunnen een alfawaarde van acht cijfers hebben, waarmee je een verloop over een heldenafbeelding vervaagt.
Where people use the
- Een heldenachtergrond bouwen die vervaagt tussen twee merkkleuren.
- Testen welke hoek er goed uitziet voordat je deze in code vastlegt.
- Het produceren van een subtiel verticaal verloop voor een kaart of een knop.
- Een semi-transparante overlay creëren die een foto donkerder maakt.
How to use the
- 1
Kies de begin- en eindkleuren
Gebruik de kleurenkiezer of typ een hexadecimale waarde. Het voorbeeld en de CSS worden bijgewerkt zodra u ze wijzigt.
- 2
Kies lineair of radiaal
Lineair loopt over de doos onder een gekozen hoek. Radiaal verspreidt zich vanuit het midden als een cirkel naar buiten.
- 3
Stel de hoek in
Sleep de schuifregelaar van 0 tot 360 graden. Onthoud dat 0 graden naar boven wijst, 90 graden naar rechts, 180 graden naar beneden, 270 graden naar links.
- 4
Kopieer de CSS
De regel is een achtergronddeclaratie die u rechtstreeks in een stylesheet kunt plakken, of desgewenst in een eigenschap van een achtergrondafbeelding.
Tips en beste praktijken
- Geef de voorkeur aan een klein helderheidsverschil voor achtergronden met tekst; het leest als textuur in plaats van als afleiding.
- Controleer bij tekst met een verloop het contrast op de lichtste en donkerste punten, niet alleen op het gemiddelde.
- Houd hellingen tot twee of drie haltes; meer heeft de neiging er modderig uit te zien.
Veelgestelde vragen
Naar welke kant wijst de hoek?
Nul graden wijst naar de bovenkant van het element en de hoek neemt met de klok mee toe. Dus 90 graden gaat naar rechts en 180 graden naar beneden. Dit is contra-intuïtief als je gewend bent aan het berekenen van hoeken die vanaf rechts tegen de klok in worden gemeten.
Waarom ziet mijn verloop er gestreept uit?
Omdat twee kleuren met een vergelijkbare luminantie zichtbare stappen produceren op een 8-bits weergave, vooral over een groot gebied. Door een subtiele derde stop toe te voegen of een iets breder luminantiebereik te gebruiken, wordt dit meestal verborgen.
Kan ik transparantie gebruiken?
Ja. Gebruik een hexadecimale waarde van acht cijfers, zoals 667eea00 voor volledig transparant of 667eea80 voor de helft, en het verloop zal vervagen over wat erachter zit.
Wordt het verloop overal ondersteund?
Lineaire en radiale gradiënten worden in elke huidige browser zonder voorvoegsel ondersteund. Leveranciersvoorvoegsels zijn alleen nodig voor zeer oude versies van Safari en Android, wat in de praktijk betekent dat er niets is gebouwd na ongeveer 2015.
Waarom wordt mijn verloop niet weergegeven?
Omdat het element geen hoogte heeft. Er wordt een verloop in de doos van het element geschilderd, zodat een lege div instort tot een hoogte van nul en niets laat zien. Stel een hoogte in of voeg inhoud toe.
Genereert het meer dan twee kleurstops?
Nee, deze tool verwerkt er twee. Voor een verloop met meerdere stops neemt u de CSS die het produceert en voegt u handmatig stops toe; de syntaxis bestaat eenvoudigweg uit meer kleur- en percentageparen, gescheiden door komma's.