CSS-gradientgenerator
Bygg linjära, radiella och koniska CSS-gradienter med flera färgstopp och kopiera koden.
background: —;
Allt körs i din webbläsare – ingen uppladdning, ingen registrering.
Om CSS-gradientgenerator
CSS Gradient-generatorn bygger linjära, radiella och koniska gradienter med full visuell kontroll. Lägg till färgstopp genom att klicka på gradientfältet, dra dem för att flytta dem, och ge varje stopp sin egen färg, opacitet och position. Linjära gradienter får en vinkelkontroll; radiella får en form (cirkel eller ellips) och position; koniska får en startvinkel.
Den levande förhandsvisningen visar exakt vad webbläsaren kommer att rendera, och en slumpknapp plus en uppsättning kuraterade förinställningar finns där när du behöver en utgångspunkt istället för en tom duk. Stopp kan läggas till och tas bort fritt — en gradient behöver bara minst två.
När det ser rätt ut kopierar du antingen det rena gradientvärdet eller en komplett CSS-regel. Generatorn körs helt i din webbläsare utan uppladdning och utan registrering, vilket gör den till en snabb följeslagare för knappar, hero-bakgrunder, ramar och texteffekter.
Så använder du CSS-gradientgenerator
- Välj gradienttyp: linjär, radiell eller konisk.
- Ställ in vinkeln (linjär), formen och positionen (radiell), eller startvinkeln (konisk).
- Klicka på gradientfältet för att lägga till färgstopp och dra dem till rätt position.
- Ge varje stopp dess färg, opacitet och exakta position.
- Prova förinställningarna eller slumpknappen för snabb inspiration.
- Kopiera gradientvärdet eller hela CSS-regeln.