CSS-gradiëntgenerator
Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
Wat is een CSS-gradiënt?
Een CSS-gradiënt is een CSS-beeldwaarde die vloeiende overgangen tussen twee of meer kleuren weergeeft zonder afbeeldingsbestanden. Gradiënten worden weergegeven door de browser, waardoor ze resolutie-onafhankelijk en zeer performant zijn.
Welke typen CSS-gradiënten worden ondersteund?
Deze generator ondersteunt drie typen: linear-gradient (kleuren langs een rechte lijn), radial-gradient (kleuren stralen vanuit het midden) en conic-gradient (kleuren draaien rond een middelpunt zoals een wijzerplaat).
Wat is het verschil tussen lineaire en radiale gradiënten?
Lineaire gradiënten laten kleuren overgaan langs een rechte lijn gedefinieerd door een hoek of richtingstrefwoord. Radiale gradiënten laten kleuren naar buiten overgaan vanuit een middelpunt in cirkelvormige of elliptische vormen.
Hoeveel kleurstops kan ik gebruiken?
U kunt zoveel kleurstops gebruiken als nodig. Elke stop definieert een kleur en optioneel een positie (0% tot 100%) langs de gradiëntlijn. Meerdere stops creëren complexe meerkleurige overgangen.
Hoe gebruik ik de gegenereerde CSS-code?
Kopieer de gegenereerde CSS-code en plak deze als waarde voor background of background-image in uw CSS-stylesheet. De code werkt in alle moderne browsers.
Wat zijn kleurstops in gradiënten?
Kleurstops definiëren specifieke kleuren op specifieke posities langs de gradiëntlijn. Bijvoorbeeld "red 0%, blue 50%, green 100%" creëert een gradiënt die rood begint, overgaat naar blauw in het midden en eindigt in groen.
Kan ik gradiënten met hoeken maken?
Ja, lineaire gradiënten ondersteunen hoekwaarden van 0deg tot 360deg. U kunt ook richtingstrefwoorden gebruiken zoals "to right", "to bottom", "to top left" voor veelvoorkomende hoeken.
Zijn CSS-gradiënten responsief?
Ja, CSS-gradiënten zijn inherent responsief omdat ze vectorgebaseerd zijn en door de browser worden weergegeven. Ze schalen perfect naar elke containgrootte zonder kwaliteitsverlies of toename van bestandsgrootte.
Beïnvloeden CSS-gradiënten de paginaprestaties?
CSS-gradiënten zijn over het algemeen zeer performant. Ze elimineren HTTP-verzoeken voor afbeeldingsbestanden en worden hardware-versneld. Zeer complexe gradiënten met veel stops kunnen echter de rendering op low-end apparaten beïnvloeden.
Kan ik gradiënten gebruiken voor achtergronden en randen?
Ja, gradiënten kunnen worden gebruikt voor background-image, border-image, mask-image en elke eigenschap die CSS-beeldwaarden accepteert. Ze werken overal waar een beeldwaarde wordt verwacht.
Welke browsers ondersteunen CSS-gradiënten?
Alle moderne browsers ondersteunen CSS-gradiënten, inclusief Chrome, Firefox, Safari, Edge en Opera. De ondersteuning is uitstekend sinds IE10. Vendor-prefixen zijn niet langer nodig.
Hoe maak ik een herhalende gradiënt?
Gebruik repeating-linear-gradient of repeating-radial-gradient in plaats van de standaardversies. Deze herhalen het gradiëntpatroon om het hele element te vullen, wat gestreepte of patrooneffecten creëert.
Kan ik CSS-gradiënten animeren?
CSS-gradiënten kunnen niet direct worden geanimeerd met CSS-overgangen. U kunt echter background-position, background-size animeren of aangepaste CSS-eigenschappen met @property gebruiken voor gradiëntanimatie-effecten.
Is deze gradiëntgenerator gratis?
Ja, deze CSS-gradiëntgenerator is volledig gratis. Geen registratie vereist, geen gebruikslimieten en alle gegenereerde code is van u om in elk project te gebruiken zonder naamsvermelding.