CSS-gradientgenerator

Generer CSS-gradientkode ved at vælge farver og vinkler med forhåndsvisning

OpdateringerTilføjet CSS-gradientgenerator, vælg farve og vinkel for at generere kodeSe opdateringer

Funktioner

Forhåndsvisning og kode opdateres samtidigt

Udseende og CSS ændrer sig samtidigt når farver og vinkler ændres

Understøtter lineær, radial og kegleformet

Præcis indstilling af vinkel, form og centerposition for hver type

Op til 10 farver justeret via træk

Juster farveposition ved at trække på bjælken, gennemsigtighed med skyderegulator

8 prøvefarver og tilfældig generering

Start med klassiske eller tilfældige farvepaletter og fin-justen

Sådan bruges det

Vælg type

Vælg gradienttype blandt lineær, radial eller kegleformet

Vælg farver

Vælg farve via farvekode eller prøve, tilføj flere farver med "Tilføj farve" og juster position og gennemsigtighed

Juster retning

For lineær: indstil vinkel eller retningsknapper; for radial og kegleformet: specificer centerposition

Kopier kode

Klik "Kopier" for at kopiere en linjes CSS til dine stilarter

Brugssituationer

Opret baggrunde til heroaftryk

Bestem baggrundsfarve for sitehovedet eller knapper uden at skrive kode

Vælg farver til blogindlæggsoverskrifter

Vælg tæt på prøvepaletten for at organisere artikeloverskriftsbaggrund

Overlejring på fotos

Opret semi-transparent lag ved at lægge reduceret opacity-farve over fotos

Justering af multi-farve-gradienter

Træk grænser mellem 3+ farver for at få finere positioner

Grundlæggende viden

Forskel mellem linear, radial og conic

CSS-gradienter har 3 funktioner med forskellige farveændringer, alle skrevet i background-egenskaben.

linear-gradient：linear-gradient er lineær gradientering hvor farve ændrer sig langs en ret linje i den angivne vinkel.
radial-gradient：radial-gradient er radial gradientering hvor farve spreder sig i cirkulær eller elliptisk form ud fra centerposition.
conic-gradient：conic-gradient er kegleformet gradientering hvor farve ændrer sig omkring centerposition med urets retning.

Tilsvarende mellem vinkler og retningsudtryk

Vinkler i linear-gradient starter ved 0deg (opad) og øges med urets retning. Vinkler kan også skrives som retningsudtryk som "to right"; 90deg svarer til "to right" og 180deg svarer til "to bottom".

Farvestoppunkter og gennemsigtighed

Farvestoppunkter (color stops) angiver hvor en farve forekommer i gradienten, hvor 0% er start og 100% er slut. For eksempel betyder "#3B82F6 0%, #8B5CF6 100%" farve skifter fra blå til lilla.

#RRGGBB-format：#RRGGBB-format repræsenterer farve ved hjælp af hexadecimal værdi for rød, grøn og blå intensitet; #FF0000 betyder uigennemsigtig rød.
rgba-format：rgba-format tilføjer gennemsigtighed (0-1) til RGB-værdier (0-255); opacity 0,5 betyder halv transparent.