CSS-gradiëntkragopwekker
Ontwerp 'n agtergrondgradiënt visueel en kopieer gebruiksklare CSS. Sleep die kleurstoppunte langs die balk, klik op die balk om 'n stoppunt by te voeg, verander die hoek of die middelpunt, en maak kleure deursigtig. Die kode bevat 'n soliede terugvalkleur vir ou blaaiers.
Hoe om dit te gebruik
- Kies lineêr, radiaal of konies, of begin by 'n voorinstelling of 'n ewekansige gradiënt.
- Klik op 'n stoppunt om sy kleur, deursigtigheid en posisie te wysig; sleep dit, of klik op die balk om nog een by te voeg.
- Kopieer die CSS en plak dit in die reël van die element.
Gereelde vrae
Wat is die verskil tussen lineêre, radiale en koniese gradiënte?
'n Lineêre gradiënt verander van kleur langs 'n reguit lyn teen die hoek wat jy kies. 'n Radiale gradiënt versprei vanaf 'n middelpunt in 'n sirkel of ellips. 'n Koniese gradiënt draai om 'n middelpunt, soos die wysers van 'n horlosie, wat nuttig is vir kleurwiele en sirkelgrafieke.
Werk CSS-gradiënte in alle blaaiers?
Ja. Lineêre, radiale en koniese gradiënte werk in alle huidige weergawes van Chrome, Edge, Firefox en Safari sonder voorvoegsels. Die eerste agtergrondreël is 'n gewone kleur, wat net deur baie ou blaaiers gebruik word.
Hoe maak ek strepe?
Sit twee stoppunte van dieselfde kleur by die begin en die einde van elke streep, sodat die kleur skielik verander in plaas van meng, en skakel Herhaal aan. Die laaste voorinstelling is 'n voorbeeld.
🏷️ Meta-etiket-kragopwekker
🖼️ Open Graph-kragopwekker
🔗 UTM-skakelbouer
🔲 CSS box-shadow-kragopwekker