Preview

CSS iġġenerati

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Kontrolli tal-Gradjent

135°
0%
100%

Presets popolari

Eżempji ta 'Gradjent

Esplora dawn l-eżempji ta 'gradjent tal-isturdament u sispira għall-proġett li jmiss tiegħek. Ikklikkja fuq kwalunkwe gradjent biex tgħabbijaha fil-ġeneratur.

Inżul ix-xemx Blush

Gradjent sħun ispirat minn inżul ix-xemx sbieħ.

Breeze tal-Oċean

Gradjent kalm li jevoka s-sensazzjoni tal-ilmijiet kostali.

Fużjoni taz-Zekka

Gradjent frisk u modern li jgħaqqad nagħniegħ u blu tas-sema.

Ġnien Lush

Gradjent vibranti li jirrappreżenta s-sbuħija tan-natura.

Ħolma Kożmika

Gradjent maġiku ispirat mis-sema tal-lejl.

Siegħa tad-Deheb

Gradjent sħun li jaqbad l-essenza tal-għabex.

Dokumentazzjoni tal-Gradjent

X'inhuma l-Gradjenti CSS?

Il-gradjenti tas-CSS jippermettulek turi transizzjonijiet bla xkiel bejn żewġ kuluri jew aktar. Jistgħu jintużaw bħala sfondi għall-elementi u jiġu fi tliet tipi differenti:

  • Gradjenti lineari:It-tranżizzjoni tal-kuluri tul linja dritta.
  • Gradjenti radjali:It-tranżizzjoni tal-kuluri minn punt ċentrali 'l barra.
  • Gradjenti koniċi:It-tranżizzjoni tal-kuluri madwar punt ċentrali f'ċirku.

Kif tuża l-gradjenti

Ladarba tkun iġġenerajt gradjent billi tuża l-għodda tagħna, tista 'tuża l-kodiċi CSS fil-proġetti tiegħek:

  1. Ikkopja l-kodiċi CSS mill-ġeneratur.
  2. Paste it into your CSS file, or use it inline in your HTML elements.
  3. Applika l-gradjent għal kwalunkwe element billi tuża l-background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Uża aktar minn żewġ kuluri għal effett ta' gradjent aktar kumpless.
  • Aġġusta l-pożizzjonijiet tal-kulur biex tikkontrolla fejn iseħħu t-tranżizzjonijiet.
  • Għaqqad gradjenti multipli għal effetti saħansitra aktar kreattivi.
  • Għal gradjenti koniċi, il-bidla taċ-ċentru toħloq mudelli interessanti.
  • Issejvja l-gradjenti favoriti tiegħek għall-użu aktar tard.

Appoġġ tal-Browser

Il-gradjenti CSS huma appoġġjati b'mod wiesa 'fil-browsers moderni. Madankollu, brawżers anzjani bħall-Internet Explorer jistgħu ma jagħmlux mod korrett. Dejjem ipprovdi kulur ta 'riżerva:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Dwar din l-għodda

Il-Ġeneratur tal-Gradjent CSS tagħna huwa ddisinjat biex jgħin lill-iżviluppaturi u d-disinjaturi joħolqu gradjenti sbieħ mingħajr sforz. Kemm jekk qed taħdem fuq websajt, applikazzjoni, jew sempliċement trid tesperimenta bil-kuluri, din l-għodda tagħmilha faċli biex tiġġenera l-gradjent perfett għall-proġett tiegħek.

Features

Faċli biex tużah

Interface intuwittiv għall-ħolqien ta 'gradjenti.

Disinn Responsiv

Jaħdem perfettament fuq id-daqsijiet kollha tal-iskrin.

Ikkopja-Paste Lest

Ikseb kodiċi CSS nadif istantanjament.

Presets Disponibbli

Ibda bi gradjenti predefiniti sbieħ.

Related Tools

Iġġenera Trasformazzjonijiet CSS3 bil-Faċilità

Għodda qawwija u intuwittiva għall-ħolqien ta 'trasformazzjonijiet CSS3 kumplessi mingħajr ma tikteb kodiċi. Viżwalizza l-bidliet f'ħin reali u kopja s-CSS iġġenerat biex tuża fil-proġetti tiegħek.

Sass li konvertitur CSS

Ittrasforma l-kodiċi Sass tiegħek f'CSS. Mgħaġġel, faċli, u sigur.

CSS Minifier

Ikkompressa u ottimizza l-kodiċi CSS tiegħek bi preċiżjoni professjonali

Deċimali għal Binarju

Ikkonverti numri deċimali għal kodiċi binarju mingħajr sforz

HEX għal HSV

Ikkonverti kuluri bejn mudelli tal-kulur Hexadecimal u HSV (Hue, Saturation, Valur) bi preview f'ħin reali.

Konvertitur tal-Effiċjenza tal-Fjuwil

Ikkonverti bejn unitajiet differenti ta 'effiċjenza fl-użu tal-fjuwil bi preċiżjoni