Squarespace Linear Gradient Backgrounds Ultimate Guide [2025]
Å legge til gradienter på Squarespace-nettstedet ditt er en enkel, men kraftig måte å forbedre designet og gjøre det visuelt tiltalende på. Fra lineære gradienter til flerfargede og transparente effekter, gradienter lar deg legge til dybde og kreativitet til seksjonene dine. Med bare noen få justeringer av CSS kan du tilpasse retningen, vinklene og til og med lage gjentatte mønstre. Det er en effektiv måte å gi nettstedet ditt et moderne og dynamisk utseende!
La oss dykke inn..
Se videoen
Sjekk ut YouTube-videoen nedenfor 👇
Naviger til Squarespace-dashbordet og gå til 'Nettstedverktøy'- delen. Klikk deretter på "Custom CSS" . Det skal se slik ut:
Deretter kopierer og limer du inn denne koden i den tilpassede CSS-delen, som vist på bildet nedenfor.
section[data-section-id="DIN ID" ]
.section-background {
bakgrunn: lineær-gradient(#00FF00, #0000FF);
}
For å enkelt identifisere Squarespace-seksjons-ID-en din, anbefaler jeg å bruke Squarespace ID Finder Chrome-utvidelsen . Med et enkelt klikk på utvidelsen vil seksjons-ID-en vises. Du kan enkelt laste den ned ved å gå til Chrome Extension Store og søke etter «Squarespace ID Finder» eller ved å slå den opp på Google.
Deretter erstatter du 'DIN ID' med din Squarespace-seksjons-ID, og voilà! Du vil ha en vakker lineær gradientbakgrunn på Squarespace-nettstedet ditt. Men det er ikke alt – det er mange flere stiler du kan utforske. Sjekk ut noen eksempler nedenfor!
Retning: Topp til bunn - Dette er det samme som vist i denne opplæringen. Kode:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: lineær-gradient(#00FF00, #0000FF); /*ENDRE DENNE FARGEN TIL DET DU ØNSKER */
}
Retning: Venstre til høyre – Bruk følgende kode for å oppnå denne gradienten:
section[data-section-id="DIN ID "]
.section-background {
bakgrunn: lineær gradient(til høyre, #FF0000, #FFFF00); /*ENDRE DENNE FARGEN TIL DET DU ØNSKER */
}
Retning: Diagonal – Bruk følgende kode for å lage en diagonal gradient:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: lineær gradient(nederst til høyre, #2193b0, #FFFF00); /*ENDRE DENNE FARGEN TIL DET DU ØNSKER */
}
Bruke vinkler: Dette eksemplet bruker 45 grader, men du kan justere den til hvilken som helst vinkel du vil at gradienten skal starte fra. Kode for å oppnå dette:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: linear-gradient(45deg, #cc2b5e, #753a88); /*ENDRE DENNE FARGEN TIL DET DU ØNSKER */
}
Flere farger: Bruk følgende kode for å lage en gradient med flere farger:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: lineær gradient(#bdc3c7, #2c3e50, #de6262); /*ENDRE DENNE FARGEN TIL DET DU ØNSKER */
}
Merk: Du kan kombinere alle de andre beregningene nevnt ovenfor, for eksempel venstre til høyre, spesifikke vinkler og mer, for å oppnå disse effektene med flere farger.
Gjennomsiktighet: Denne gradienten går fra en farge til en gjennomsiktig farge – for eksempel rød til gjennomsiktig i dette tilfellet. Du kan bruke denne effekten over en annen bakgrunn for å få den til å blande seg sømløst. Koden for å oppnå dette:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: lineær gradient(til høyre, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); /* Du kan endre retning her og farger */
}
Og nå, den dere alle har ventet på... Ok, kanskje ikke, men seriøst – Gjenta en lineær gradient. Bruk følgende kode for å oppnå denne effekten:
section[data-section-id="DIN ID"]
.section-background {
bakgrunn: repeterende-lineær-gradient (rød, gul 10%, grønn 20%); /* Vi spesifiserer hvor mye hver farge skal veie - du kan også bruke
*/
Din designer
Jeg er Victor Rolf, en ekspert Squarespace-designer. Hvis du vil diskutere et potensielt prosjekt, kan du sende meg en e-post på victor@rolfmade.com eller ta kontakt her . Alternativt kan du sette opp en gratis 15-minutters konsultasjonssamtale her.
