Hur man lägger till kantgradient i CSS [+3 Tools]

Innehållsförteckning

Kantlinjer med Gradienter i CSS

I CSS-världen ger egenskapen ”border” oss möjligheten att definiera utseendet på ett elements kanter. Vi kan specificera kantens stil, bredd och färg.

Med CSS-gradienter kan vi skapa mjuka övergångar mellan två eller flera färger, vilket öppnar för kreativa visuella effekter. Det ger möjlighet till skuggningar, färgskiftningar och textur på webbsidans element.

En ”border-gradient” är en CSS-funktion som låter utvecklare tillämpa en gradient direkt på ett elements kantlinje. Det innebär att kantlinjen inte längre behöver vara en solid färg, utan kan variera i färg.

Denna funktion gör att vi kan skapa visuellt intressanta effekter där kantlinjens färg gradvis ändras från en nyans till en annan.

Varför är gradientkanter användbara?

Gradientkanter introducerades som en del av CSS3:s utökade stylingmöjligheter. Här är några anledningar till varför du bör överväga att använda dem i dina webbapplikationer:

Flexibilitet: Med gradientkanter kan du designa komplexa och dynamiska effekter. Detta står i kontrast till de ofta stela, enfärgade kanterna. Gradientkanter är därför praktiska för komplexa layouter eller former som kräver subtila visuella nyanser.
Visuellt Tilltalande: De hjälper dig att skapa iögonfallande effekter i din design. Du kan till exempel använda starka färgkontraster för att framhäva specifika element på sidan.
Sömlös Integration: Gradientkanter möjliggör sömlös integration av kanten i elementets bakgrund, vilket ger webbsidan ett enhetligt och välplanerat utseende.

Hur man implementerar gradientkanter i CSS

Innan vi går in på hur man skapar gradientkanter, låt oss först visa hur man lägger till en enkel kantlinje till ett HTML-element.

Här är den grundläggande koden:

HTML:

<div class="box med-kant">
    Exempel på hur man lägger till en kant!
</div>

CSS:

.box {
    width: 400px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.med-kant {
    border-color: rebeccapurple;
    border-style: solid;
    border-width: 5px;
}

Resultatet av denna kod är en enkel kant, men den kan kännas lite tråkig. Den består av en 5px solid rebeccapurple-kant runt vår div.

För att göra kanten mer intressant kan vi använda gradientkanter. Det finns flera sätt att göra detta, och här är några av de mest centrala:

Använda Gradientkanter (Linjär, Radiell, Konisk)

Vi ska illustrera hur man använder gradientkanter på tre olika sätt:

Linjär Gradient

En linjär gradient ger en mjuk övergång mellan färger längs en rak linje. Vi använder följande kod som exempel:

HTML:

<div class="box linjar-gradient">
    Exempel på en linjär gradient
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.linjar-gradient {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}

Här har vi specificerat att kanten ska vara solid, med en bredd på 10px.

Den linjära gradienten går från rgb(143, 55, 0) till rgb(66, 228, 250), med en vinkel på 45 grader. Bredden på kantbilden är inställd på 1.

Radiell Gradient

En radiell gradient skapar en cirkulär övergång som strålar ut från en central punkt. Denna teknik ger möjlighet till färgskiftningar i ett elements design.

HTML:

<div class="box radiell-gradient">
    Exempel på en radiell gradient
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.radiell-gradient {
    border-style: solid;
    border-width: 5px;
    border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

Här är kanten solid med en bredd på 5px.

Den radiella gradienten går från mörkgrön RGB(0,143,104) till ljusgul rgb(250,224,66). Talet ’1’ i slutet representerar ’border-image-repeat’-egenskapen som gör att gränsbilden endast upprepas en gång runt elementet.

Konisk Gradient

En konisk gradient skapar en cirkulär färgövergång. Denna effekt startar från en mittpunkt och sprider sig utåt i en cirkulär form.

HTML:

<div class="box konisk-gradient">
    Exempel på en konisk gradient
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.konisk-gradient {
    border-style: solid;
    border-width: 7.5px;
    border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}

I denna kod är kantstilen solid, med en bredd på 7,5px. `border-image`-egenskapen definierar en konisk gradient med sju olika färger.

Siffran ’1’ i slutet visar kantbredden som 1 pixel.

Använda Kantbilder

Kantbilder ersätter vanliga, fasta ramar runt HTML-element. De används för att skapa komplexa designmönster istället för en enkel färggradient.

HTML:

<div class="box kant-bilder">
    Exempel på kantbilder
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.kant-bilder {
    border-style: solid;
    border-width: 15px;
    border-image-source: url(/images/elephant-2910293_1920.jpg);
    border-image-slice: 60 30;
}

Vi har satt kantbredden till 15px och stilen till solid.

`border-image-slice` bestämmer bredden och höjden på kantrutan, 60% respektive 30%.

Använda Stenografisk Egenskap

En stenografisk egenskap gör att utvecklare kan ange flera CSS-egenskaper i en enda kodrad. Här använder vi `border-image` för att ange både `border-image-source` och `border-image-slice`.

HTML:

<div class="box shorthand">
    Exempel på en stenografisk egenskap
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.shorthand {
    border-style: solid;
    border-width: 15px;
    border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}

CSS Kant-gradientgeneratorer

CSS kant-gradientgeneratorer underlättar skapandet av gradienter för utvecklare genom att erbjuda möjligheter att finjustera inställningarna utan att behöva skriva all kod från grunden. Här är några av de verktyg som är tillgängliga:

#1. CSS Gradient Generator – Converting Colors

Converting Colors hjälper dig att generera linjär eller radiell CSS-kod för gradienter med upp till fem färger. Koden kan användas som en kants eller bakgrundsbild.

Med den här generatorn kan du:

Välja upp till fem färger för din gradientkant.
Välja gradientens riktning (linjär eller radiell).
Använda funktionen för färgstopp för att styra färgövergångarna.

När du är klar med att experimentera kan du kopiera den genererade koden och använda den på din webbplats.

#2. CSS Border Gradient Generator – Unused CSS

Unused-CSS hjälper utvecklare att skapa gradientkanter för blockelement utan att använda pseudoelement eller extra element.

Med Unused-CSS kan du:

Välja mellan olika gradienttyper (radiell och linjär).
Förhandsgranska kantgradienten medan du anpassar den.
Hantera färgstoppen för färgövergångarna.
Anpassa kantstorlek och kantradie.

När du är nöjd med koden kan du kopiera och använda den i ditt projekt.

#3. Gradient Border Generator – Amit Sheen

Detta verktyg erbjuder åtta olika bakgrundsområden, vilket gör det möjligt för utvecklare att skapa rundade gradientkanteffekter.

Detta verktyg ger dig möjlighet att:

Skapa gradientanimationer som övergår mellan två eller flera färger.
Använda anpassad JavaScript-kod.
Se förändringar live i en förhandsvisning.

Efter att ha anpassat dina gradienteffekter kan du enkelt kopiera och klistra in koden.

Slutsats

För att förbättra utseendet på dina webbsidor kan du använda någon av de metoder som nämns ovan för att lägga till gradientkanter till dina element. Ditt val kan variera beroende på dina preferenser, kompetensnivå och vilken typ av element som ska stylas.

Det är också möjligt att använda olika metoder för olika element på en och samma webbsida.

Utforska hur du kan skapa en dubbel ram i CSS för ytterligare visuell förbättring av din webbsida. Läs mer om dubbla ramar i CSS.