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.
Hoe CSS-gradiëntgenerator te gebruiken
Stel CSS-verlopen op het oog samen en kopieer direct productieklare code. Het renderen gebeurt lokaal in je browser, zonder uploads.
- Selecteer het Type verloop: linear-gradient of radial-gradient.
- Stel de Angle in voor lineaire verlopen, of kies een Shape zoals circle of ellipse voor radiale verlopen.
- Voeg kleurstops toe, geef ze een andere kleur en versleep ze in de sectie Color Stops.
- Klik op een staal onder Presets om met een kant-en-klaar verloop te beginnen.
- Kopieer de gegenereerde CSS en plak deze in je stylesheet.
Zet twee stops met verschillende kleuren op dezelfde positie voor een harde rand — een snelle manier om strepen zonder afbeeldingen te maken.
Gerelateerde tools
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- CSS Border Radius Generator Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.
- CSS Grid Generator Gratis visuele CSS Grid-generator met live preview. Ontwerp interactief responsieve grid-lay-outs en exporteer direct productieklare CSS-code.
- CSS Flexbox Generator Visuele CSS Flexbox-generator met live preview. Pas flex-eigenschappen aan en krijg direct bruikbare CSS-code.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.