# CSS-liukuvärigeneraattori vai käsin kirjoitettu koodi

[Canonical HTML page](https://gradiently.design/fi/guide/css-gradient-generator)

Generaattorin koodi kelpaa usein liitettäväksi, mutta on hieman vanhentunutta. Opettele neljä osaa, niin kirjoitat liukuvärin työkalun etsimistä nopeammin ja säädät sitä liukusäädintä tarkemmin.

## The short version

- CSS-liukuvärigeneraattori muuttaa väri- ja kulmavalinnat tyylitiedostoon liitettäväksi background-image-arvoksi.
- Jokaisessa CSS-liukuvärissä on neljä osaa: tyyppi, suunta tai sijainti, valinnainen interpoloinnin väriavaruus ja väripisteet.
- Vanhat generaattorit tuottavat yhä valmistajaetuliitteitä ja Internet Explorer -suodattimia, joita nykyiset selaimet eivät tarvitse.
- Kolmas väripiste, oklch-väriavaruus tai toinen kerros parantaa tulosta usein enemmän kuin värien vaihtaminen.
- Valmiin liukuvärin tallentaminen mukautettuun ominaisuuteen tekee siitä uudelleenkäytettävän ja keskitetysti muokattavan.

**CSS-liukuvärigeneraattori** antaa värien ja kulman valinnan jälkeen liitettävän arvon, kuten `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`. Se on hyvä lähtökohta. CSS-liukuvärin kirjoittaa kuitenkin käsin alle minuutissa, ja juuri käsin lisäät kolmannen pisteen, paremman väriavaruuden tai toisen kerroksen. Tässä luet, siistit ja kirjoitat koodin itse.

## Jokaisen CSS-liukuvärin neljä osaa

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Kaikki generaattorin liukusäätimet vastaavat jotakin näistä neljästä osasta.

| Osa | Vaihtoehdot | Oletus ilman arvoa |
| --- | --- | --- |
| Tyyppi | `linear`, `radial`, `conic` ja `repeating`-versiot | Ei oletusta, valinta pakollinen |
| Suunta tai sijainti | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Ylhäältä alas, keskitetty ellipsi, alkaen 0deg |
| Väriavaruus | `in oklab`, `in oklch`, `in srgb` ja muut | sRGB heksaväreille |
| Väripisteet | Mitkä tahansa värit, sijainti prosenttina tai pituutena valinnainen | Tasaisesti 0 %:sta 100 %:iin |

Oletukset selittävät samankaltaiset tulokset: kaksi tasaisesti jaettua pistettä sRGB-sekoituksena.

Tyypeille on omat oppaat: [lineaariset liukuvärit](https://gradiently.design/fi/guide/css-linear-gradient), [säteittäiset liukuvärit](https://gradiently.design/fi/guide/css-radial-gradient) ja [kartioliukuvärit](https://gradiently.design/fi/guide/css-conic-gradient).

## Kopioitavat liukuvärireseptit

Nämä on kirjoitettu käsin. Jokaisessa on perusgeneraattorista usein puuttuva idea: epäkeskinen valo, kolme pistettä tai valittu väriavaruus. Kopioi napsauttamalla.

- Hämärä, kolme pistettä: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Merilasi: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Hiillos nurkassa: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Pehmeä paperi: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Pohjoinen vihreä: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violetista oranssiin pinkin kautta: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Viimeisessä on vain kaksi pistettä, mutta oklch kulkee elävän pinkin kautta sRGB:n murretun malvan sijaan. Ilman väriavaruustukea liukuväri jää pois, joten määritä tavallinen versio ensin.

## Generaattorin tuloksen siistiminen

Vanha generaattori voi antaa viisi riviä yhden sijaan. Etuliitteelliset liukuvärit ja Internet Explorer -suodatin ovat olleet tarpeettomia vuosia. Ne lisäävät painoa, ja vanha `-webkit-`-syntaksi käyttää eri kulmajärjestelmää, joka sekoittaa myöhemmän muokkaajan.

### Tavallinen vanha tulos

- `background: #1e1b4b;` ja kolme etuliitteellistä kopiota
- `-webkit-linear-gradient(left, ...)` vanhoilla kulmasäännöillä
- `filter: progid:DXImageTransform...` Internet Explorerille
- `rgba(30, 27, 75, 1)` täysin peittäville väreille

### Siisti nykykoodi

- Yksi tasainen background-color varalle
- Yksi etuliitteetön linear-gradient()
- Ei suodattimia
- Lyhyt heksaväri tai `rgb(30 27 75 / 0.5)` vain alfaa tarvittaessa

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Vanhan generaattorin koko viesti kahdella rivillä.

Selainkin toimii generaattorina. Avaa kehittäjätyökalut, valitse elementti ja napsauta liukuvärin väriruutua Styles-paneelissa. Saat värivalitsimen kyseiselle pisteelle ja voit muokata kulmia sekä prosentteja suoraan sivun päivittyessä. Kopioi lopullinen arvo tyylitiedostoon. Oikeaa sisältöä vasten säätäminen toimii erillistä työkalua paremmin, sillä näet liukuvärin oman otsikon takana.

## Viisi liukusäädintä parempaa muokkausta

1. **Lisää keskimmäinen piste** Kaksi pistettä tekee suoran rampin. Kolmas väri noin 50-60 %:n kohdalla tuo syvyyttä ja hallintaa muutoksen paikkaan.
2. **Valitse väriavaruus** `in oklab` pitää kaukaiset värit puhtaina, `in oklch` antaa sävyn kiertää. [Liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) näyttää eron.
3. **Siirrä valo sivuun** Vaihda lineaarinen versioon `radial-gradient(circle at 80% 20%, ...)`, jotta kirkkain väri tulee nurkasta kuin valonlähde.
4. **Kerrosta kaksi tai kolme liukuväriä** Erota background-image-arvot pilkuilla. Säteittäiset hehkut lineaarisella pohjalla ovat rikkaampia kuin yksi liukuväri; [CSS-verkkoliukuvärit](https://gradiently.design/fi/guide/css-mesh-gradient) vie tämän pidemmälle.
5. **Lisää hieman rakeisuutta** Heikko kohinakerros peittää suurten tummien liukuvärien juovittumista. Koodi löytyy artikkelista [CSS-kohinapinta](https://gradiently.design/fi/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Kolme käsin kirjoitettua kerrosta: pinkki valo oikealla ylhäällä, indigolampi vasemmalla alhaalla ja tumma pohja. Ensimmäinen kerros on päällä.

## Liukuväri uudelleenkäytettäväksi tokeniksi

Kun liukuväri toimii, nimeä se. Mukautettu ominaisuus sisältää koko arvon, jolloin painikkeet, bannerit ja pääkuva jakavat sen ja uudistus muuttaa yhtä riviä. [CSS-muuttujat teemoissa](https://gradiently.design/fi/guide/css-custom-properties-theming) näyttää vaihdon brändin tai tilan mukaan.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Yksi määritelmä kaikkialla. Värimuutos ei koske muuta tyylitiedostoa.

## Milloin generaattori ei ole oikea työkalu

Generaattori ja käsin kirjoitettu CSS jakavat rajan: kuka tahansa voi lukea väripisteet tyylitiedostosta ja käyttää niitä. Se sopii käyttöliittymän yksityiskohtiin. Sivuston ja julkaisujen tunnistettavaan taustaan voit haluta rikkaampaa ja vaikeammin kopioitavaa. [Liukuvärigeneraattorin käyttö](https://gradiently.design/fi/guide/gradient-generator) antaa laajemmat neuvot.

Gradientlyn Markit ylittävät CSS:n kuvauksen: kerrostetut materiaalit, valo, rae ja liike renderöidään joka kokoon, ja omistajia on yksi kerrallaan. Suunnittele ilmaiseksi lunastamattomalla Markilla ja etsi Markkinoilta värisanoilla lähellä tavoittelemaasi liukuväriä oleva.

## FAQ

### Mikä on CSS-liukuvärigeneraattori?

Työkalu värien, kulman ja tyypin visuaaliseen valintaan. Se tuottaa CSS:ään liitettävän linear-gradient()-, radial-gradient()- tai conic-gradient()-arvon.

### Tarvitseeko CSS-liukuväri vielä -webkit-etuliitteen?

Ei. Etuliitteettömät liukuvärit toimivat kaikissa nykyisissä selaimissa. Poista etuliitteelliset kopiot ja vanhat Internet Explorer -suodattimet.

### Miten kirjoitan CSS-liukuvärin käsin?

Valitse tyyppi, suunta ja vähintään kaksi väripistettä: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Miksi generoitu liukuväri on keskeltä samea?

sRGB harmaantuu kaukaisten värien välillä. Lisää kulman jälkeen in oklab tai puhtaampi keskimmäinen väripiste.

### Miten käytän liukuväriä koko sivustolla?

Tallenna koko arvo mukautettuun ominaisuuteen kuten --gradient-brand ja käytä var(--gradient-brand) tarvittavissa paikoissa.