CSS Gradient Generator

Wat is een CSS Grid-generator?

Een CSS Grid-generator creëert CSS Grid-layouts visueel: definieer rijen, kolommen, gappen en plaatsing van elementen door te klikken en slepen in plaats van handmatig CSS te schrijven.

CSS Grid is het krachtigste layout-systeem in CSS. Het biedt tweedimensionale controle (rijen en kolommen tegelijk), in tegenstelling tot Flexbox dat eendimensionaal werkt.

CSS-gradiëntsyntaxis

De functie linear-gradient() neemt een richting (hoek of trefwoord) gevolgd door kleurstops. De basissyntaxis is background: linear-gradient(hoek, kleur1 positie1, kleur2 positie2). De hoek is in graden — 0deg gaat van onder naar boven, 90deg van links naar rechts en 180deg van boven naar onder. U kunt zoveel kleurstops toevoegen als nodig.

Radiale gradiënten gebruiken radial-gradient(vorm grootte at positie, kleur1, kleur2). De vorm kan circle of ellipse zijn. De groottetrefwoorden (closest-side, farthest-corner, enz.) bepalen hoe ver de gradiënt zich uitstrekt. Indien weggelaten, gebruikt de browser standaardwaarden die er meestal goed uitzien.

Hoe gebruikt u deze tool?

Stel het aantal rijen en kolommen in, definieer de afmetingen (px, fr, %, auto), en sleep elementen naar hun gewenste positie. De gegenereerde CSS-code wordt live bijgewerkt.

Ontwerptips voor gradiënten

Subtiele gradiënten zien er professioneler uit dan dramatische. Een verschuiving van 10–20 graden in tint tussen twee nauw verwante kleuren creëert een elegante, moderne uitstraling. Vermijd het combineren van meer dan drie kleuren tenzij u bewust een regenboogeffect creëert. Grote vlakken hebben baat bij zachte gradiënten, terwijl kleine UI-elementen zoals knoppen krachtigere overgangen aankunnen.

Voor donkere ontwerpen voegen gradiëntoverlays op donkere achtergronden diepte toe zonder afleidend te zijn. Gebruik semi-transparante kleurstops (rgba of hsla) om glasachtige effecten te creëren. Stapel meerdere gradiënten met komma's in de background-eigenschap voor complexe composities.

Prestatieoverwegingen

CSS-gradiënten worden door de GPU versneld en zijn extreem performant — veel beter dan het laden van gradiëntafbeeldingen. Zeer complexe gradiënten met veel kleurstops kunnen echter kleine renderverschillen tussen browsers veroorzaken. Test uw gradiënten altijd in Chrome, Firefox en Safari. Moderne browsers ondersteunen gradiënten zonder vendor-prefixes, dus -webkit-linear-gradient is niet langer nodig.

Veelgestelde vragen

Moet ik Grid of Flexbox gebruiken?

Grid voor tweedimensionale layouts (paginalayouts, dashboards, galerijen). Flexbox voor eendimensionale uitlijning (navigatiebalken, kaartinhoud, centreren). Ze werken uitstekend samen: Grid voor de paginalayout, Flexbox voor componenten binnen de grid.

Wordt CSS Grid ondersteund door alle browsers?

Ja, alle moderne browsers ondersteunen CSS Grid volledig (97%+ van de gebruikers wereldwijd). IE 11 heeft een verouderde implementatie met -ms- prefix. Voor IE-ondersteuning: gebruik de Autoprefixer-tool of een Flexbox-fallback.