CSS gradient generator
Opret lineære, radiale og koniske CSS-gradienter i din browser.
Farvestop
Brug stop-håndtagene eller tastaturets piletaster til at redigere positioner. Hvert stop indeholder en eksplicit farve, opacitet og procentdel.
Browser-native lokal behandling
Din gradant forbliver i denne browser. Ingen farver eller genererede CSS sendes til Convertr.
Begrænset importgrammatik
Import accepterer linear-gradient(), radial-gradient() eller conic-gradient() med hex-farver og procenter. Deklarationer, URL'er, variabler og ukendte funktioner afvises lokalt.
Tilgængelig faldback
Den genererede CSS indeholder en solid baggrundsfarve-fallback sammen med gradienten for ikke-understøttede renderere og tilgængelig kontrolgrænseflade.
Ofte stillede spørgsmål
Er min gradient uploadet?
Nej. Gradientens tilstand, farver, importeret CSS og genereret CSS forbliver i din browser.
Hvilke CSS-gradienttyper støttes?
Generatoren skaber linear-gradient(), radial-gradient() og conic-gradient() output med flere hex-farvestop.
Hvad kan jeg importere?
Import accepterer en bevidst begrænset grammatik ved hjælp af en understøttet gradientfunktion, hex-farver, valgfrie procenter og afgrænsede vinkel- eller positionsværdier.
CSS gradient generator
Byg lineære eller radiale CSS-gradienter og forhåndsvis farvestop, vinkel, position og gentagelse.
- Indtastning
- Gradienttype, farvestop, positioner, vinkel og gentagelsesindstillinger.
- Udgang
- En live-forhåndsvisning og kopierbar CSS-baggrundserklæring.
- Virkelige begrænsninger
- Browserrendering kan variere lidt afhængigt af motor, og værktøjet vurderer ikke kontrast eller garanterer support i ældre browsere.
- Privatliv og databehandling
- gradient type, farve stops, positioner, vinkler og gentagne indstillinger behandles i denne browser-tab. Convertr modtager eller gemmer det; lukning eller omladning af siden renses den arbejdsstand, medmindre værktøjet udtrykkeligt tilbyder en lokal download.
Hvordan man bruger dette værktøj
- Giv gradienttype, farvestop, positioner, vinkel og gentagelsesindstillinger i værktøjskontrollerne.
- Vælg de indstillinger, der påvirker en live-forhåndsvisning og kopierbar CSS-baggrundserklæring, og kør derefter værktøjet.
- Gennemgå en live-forhåndsvisning og kopierbar CSS-baggrundserklæring, før du kopierer eller downloader den.
Almindelige fejltilstande
En manglende farvestop, ugyldig farve eller uforenelig position forhindrer en gyldig CSS-deklaration i at blive opbygget.
Nyttigt eksempel
Opret en 90-graders lineær gradient fra #111827 ved 0% til #f59e0b ved 100% og kopier deklarationen.