{"json_modified": "2016-08-05T21:15:39.473615", "uuid": "51de7082-2845-4905-ac42-246cc3cdb0ba", "title": "linear-gradient()", "url": "/de/docs/Web/CSS/linear-gradient", "tags": [], "translations": [{"uuid": "9f5aeb8c-a90b-4882-a0dc-a907b4b1866b", "title": "linear-gradient()", "url": "/en-US/docs/Web/CSS/linear-gradient", "tags": ["CSS Image", "CSS", "Reference", "Graphics", "Web", "CSS Function", "NeedsNewCompatTable", "Layout"], "summary": "The CSS <code>linear-gradient()</code> function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree.\"><code>&lt;image&gt;</code></a> which represents a linear gradient of colors. The result of this function is an object of the CSS <a href=\"/en-US/docs/Web/CSS/gradient\" title=\"The &lt;gradient&gt; CSS data type denotes a CSS &lt;image&gt; made of a progressive transition between two or more colors. A CSS gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.\"><code>&lt;gradient&gt;</code></a> data type. Like any other gradient, a CSS linear gradient is not a CSS <a href=\"/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> but an image with <a href=\"/en-US/docs/Web/CSS/image#no_intrinsic\">no intrinsic dimensions</a>; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size\u00a0of the element it applies to.", "localization_tags": [], "locale": "en-US", "last_edit": "2016-07-02T08:05:49", "review_tags": []}, {"uuid": "4bda662f-78ed-4e82-a306-281a1c3b92f1", "title": "linear-gradient", "url": "/ja/docs/Web/CSS/linear-gradient", "tags": ["CSS", "CSS3", "css3-images", "CSS Reference"], "summary": "CSS \u306e <code>linear-gradient()</code> \u95a2\u6570\u306f\u3001\u8272\u306e\u7dda\u5f62\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u3059 <a href=\"/ja/docs/Web/CSS/image\" title=\"CSS &#x306E; &lt;image&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306F;&#x3001;2 &#x6B21;&#x5143;&#x306E;&#x753B;&#x50CF;&#x3092;&#x8868;&#x73FE;&#x3057;&#x307E;&#x3059;&#x3002;CSS &#x3067;&#x306F;&#x753B;&#x50CF;&#x306F; 2 &#x7A2E;&#x985E;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;URL &#x3092;&#x4F7F;&#x3063;&#x3066;&#x53C2;&#x7167;&#x3055;&#x308C;&#x308B;&#x3053;&#x3068;&#x306E;&#x591A;&#x3044;&#x3054;&#x304F;&#x666E;&#x901A;&#x306E;&#x9759;&#x7684;&#x306A;&#x753B;&#x50CF;&#x3068;&#x3001;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x6728;&#x69CB;&#x9020;&#x306E;&#x4E00;&#x90E8;&#x5206;&#x3092;&#x8868;&#x73FE;&#x3059;&#x308B;&#x3088;&#x3046;&#x306A;&#x52D5;&#x7684;&#x306B;&#x751F;&#x6210;&#x3055;&#x308C;&#x305F;&#x753B;&#x50CF;&#x3067;&#x3059;&#x3002;\"><code>&lt;image&gt;</code></a> \u3092\u4f5c\u308a\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306e\u7d50\u679c\u306f CSS \u306e <a href=\"/ja/docs/Web/CSS/gradient\" title=\"CSS &#x306E; &lt;gradient&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306F;&#x3001;2 &#x8272;&#x304B;&#x305D;&#x308C;&#x4EE5;&#x4E0A;&#x306E;&#x8272;&#x9593;&#x3092;&#x8272;&#x304C;&#x9023;&#x7D9A;&#x5909;&#x5316;&#x3059;&#x308B;&#x3088;&#x3046;&#x306A; CSS &#x306E; &lt;image&gt; &#x3092;&#x8868;&#x3057;&#x307E;&#x3059;&#x3002;CSS &#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F; CSS &#x306E; &lt;color&gt; &#x3067;&#x306F;&#x306A;&#x304F;&#x3001;&#x56FA;&#x6709;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x3092;&#x6301;&#x305F;&#x306A;&#x3044;&#x753B;&#x50CF;&#x3067;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x3001;&#x753B;&#x50CF;&#x672C;&#x6765;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x3084;&#x3001;&#x512A;&#x5148;&#x3055;&#x308C;&#x308B;&#x30B5;&#x30A4;&#x30BA;&#x3092;&#x6301;&#x305F;&#x306A;&#x3044;&#x3068;&#x3044;&#x3046;&#x3053;&#x3068;&#x3067;&#x3059;&#xFF08;&#x30A2;&#x30B9;&#x30DA;&#x30AF;&#x30C8;&#x6BD4;&#x306B;&#x3064;&#x3044;&#x3066;&#x3082;&#x540C;&#x69D8;&#x3067;&#x3059;&#xFF09;&#x3002;&#x5B9F;&#x969B;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x306F;&#x3001;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x7528;&#x3044;&#x3089;&#x308C;&#x308B;&#x8981;&#x7D20;&#x306B;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x305F;&#x3082;&#x306E;&#x306B;&#x306A;&#x308B;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;\"><code>&lt;gradient&gt;</code></a> \u30c7\u30fc\u30bf\u578b\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308a\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-06-28T06:46:45", "review_tags": []}, {"uuid": "dc770f5e-cb8d-4fce-8645-aee8a0202e8e", "title": "linear-gradient", "url": "/fr/docs/Web/CSS/linear-gradient", "tags": ["CSS", "Fonction", "R\u00e9f\u00e9rence"], "summary": "Les d\u00e9grad\u00e9s lin\u00e9aires sont d\u00e9finis par un axe :\u00a0la <em>ligne du d\u00e9grad\u00e9</em>. Chaque point de cette ligne aura une couleur diff\u00e9rente. Les lignes perpendiculaires \u00e0 la ligne du d\u00e9grad\u00e9 ont chacune une couleur qui est celle du point se situant sur la ligne du d\u00e9grad\u00e9 \u00e0 ce niveau.", "localization_tags": [], "locale": "fr", "last_edit": "2016-07-06T11:50:07", "review_tags": []}, {"uuid": "eb7b59db-de5d-4a29-bfd1-f15a7bb45aa5", "title": "linear-gradient", "url": "/ko/docs/Web/CSS/linear-gradient", "tags": ["CSS", "\ud3b8\ub78c", "CSS \uc774\ubbf8\uc9c0", "\uadf8\ub798\ud53d", "CSS \ud568\uc218", "\uc6f9", "\ub808\uc774\uc544\uc6c3"], "summary": "CSS\uc758\u00a0<code>linear-gradient()</code>\u00a0\ud568\uc218\ub294 \uc120\ud615 \uceec\ub7ec \uadf8\ub808\ub514\uc5b8\ud2b8\ub97c \ub098\ud0c0\ub0b4\ub294 <a href=\"/ko/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;image&gt;</code></a>\ub97c \ub9cc\ub4e4\uc5b4\ub0b8\ub2e4. \uc774 \ud568\uc218\uc758 \uacb0\uacfc \uac12\uc740 CSS <a href=\"/ko/docs/Web/CSS/gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;gradient&gt;</code></a> \ub370\uc774\ud130 \ud615\uc758 \uac1d\uccb4\ub2e4. \ub2e4\ub978 \uadf8\ub808\ub514\uc5b8\ud2b8\ucc98\ub7fc CSS \uc120\ud615 \uadf8\ub808\ub514\uc5b8\ud2b8\ub3c4 CSS <a href=\"/ko/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;color&gt;</code></a>\uac00 \uc544\ub2c8\uba70 \ubcf8\ub798\uc758 \ud06c\uae30\uac00 \uc5c6\ub294(<a href=\"/en/CSS/image#no_intrinsic\" style=\"font-size: 13.63636302948px; line-height: 19.0909080505371px;\" title=\"en/CSS/image#no_intrinsic\">no intrinsic dimensions</a>)\u00a0<span style=\"font-size: 14px; line-height: 1.5;\">\uc774\ubbf8\uc9c0\ub2e4. \uc989, \ubbf8\ub9ac \uc815\ud574\uc9c4 \ub610\ub294 \uc6b0\uc120\uc2dc\ub418\ub294 \ud06c\uae30\ub098 \ube44\uc728\uc740 \uc5c6\ub2e4</span><span style=\"font-size: 14px; line-height: 1.5;\">. \uc2e4\uc81c\uc801\uc778 \ud06c\uae30\ub294 \uadf8\ub808\ub514\uc5b8\ud2b8\uac00 \uc801\uc6a9\ub418\ub294 \uc694\uc18c\uc5d0 \ub9de\ucd94\uc5b4\uc9c4\ub2e4.</span>", "localization_tags": [], "locale": "ko", "last_edit": "2016-06-28T06:44:08", "review_tags": []}, {"uuid": "5c67aab0-8c50-41d4-a656-f7f1a657d696", "title": "linear-gradient", "url": "/zh-CN/docs/Web/CSS/linear-gradient", "tags": [], "summary": "CSS <code>linear-gradient()</code>\u00a0\u51fd\u6570\u521b\u5efa\u4e86\u4e00\u4e2a\u5448\u73b0\u7ebf\u6027\u6e10\u53d8\u989c\u8272\u7684\u00a0<a href=\"/zh-CN/docs/Web/CSS/image\" title=\"CSS&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x63CF;&#x8FF0;&#x7684;&#x662F;2D&#x56FE;&#x5F62;&#x3002;&#x5728;CSS&#x4E2D;&#x6709;&#x4E24;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x56FE;&#x50CF;&#xFF1A;&#x7B80;&#x5355;&#x7684;&#x9759;&#x6001;&#x56FE;&#x50CF;&#xFF0C;&#x7ECF;&#x5E38;&#x88AB;&#x4E00;&#x4E2A;&#x5728;&#x4F7F;&#x7528;&#x7684;URL&#x5F15;&#x7528;&#xFF0C;&#x52A8;&#x6001;&#x751F;&#x6210;&#x7684;&#x56FE;&#x50CF;&#xFF0C;&#x6BD4;&#x5982;DOM&#x6811;&#x7684;&#x90E8;&#x5206;&#x5143;&#x7D20;&#x6837;&#x5F0F;&#x6E10;&#x53D8;&#x6216;&#x8005;&#x8BA1;&#x7B97;&#x6837;&#x5F0F;&#x4EA7;&#x751F;&#x3002;\"><code>&lt;image&gt;</code></a>\u3002\u8be5\u51fd\u6570\u7ed3\u679c\u662f\u4e00\u4e2aCSS <a href=\"/zh-CN/docs/Web/CSS/gradient\" title=\"The &lt;gradient&gt; CSS data type denotes a CSS &lt;image&gt; made of a progressive transition between two or more colors. A CSS gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.\"><code>&lt;gradient&gt;</code></a>\u5bf9\u8c61\u7684\u6570\u636e\u7c7b\u578b\u3002\u50cf\u5176\u4ed6\u6e10\u53d8\u4e00\u6837, \u7ebf\u6027\u6e10\u53d8\u4e0d\u662f\u4e00\u4e2acss<a href=\"/zh-CN/docs/Web/CSS/color_value\" title=\"CSS &#x6570;&#x636E;&#x7C7B;&#x578B; &lt;color&gt; &#x8868;&#x793A;&#x4E00;&#x79CD;&#x6807;&#x51C6;RGB&#x8272;&#x5F69;&#x7A7A;&#x95F4;&#xFF08;sRGB color space&#xFF09;&#x7684;&#x989C;&#x8272;&#x3002;&#x4E00;&#x79CD;&#x989C;&#x8272;&#x53EF;&#x4EE5;&#x7528;&#x4EE5;&#x4E0B;&#x4EFB;&#x610F;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x63CF;&#x8FF0;&#xFF1A;\"><code>&lt;color&gt;</code></a>\u4e14\u56fe\u50cf<a href=\"/en-US/docs/Web/CSS/image#no_intrinsic\">\u65e0\u5185\u5728\u5c3a\u5bf8</a>\uff1b\u5c31\u662f\u8bf4, \u5b83\u6ca1\u6709\u9ed8\u8ba4\u6216\u8005\u9996\u9009\u7684\u5927\u5c0f\u6216\u8005\u662f\u6bd4\u4f8b\u3002\u5b83\u7684\u5177\u4f53\u5c3a\u5bf8\u5927\u5c0f\u548c\u5b83\u5bf9\u5e94\u7684\u5143\u7d20\u7684\u5927\u5c0f\u76f8\u5339\u914d\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-06-29T05:40:07", "review_tags": ["technical", "editorial"]}, {"uuid": "93d2552a-b4a8-4911-a557-62050fabdbfe", "title": "linear-gradient", "url": "/es/docs/Web/CSS/linear-gradient", "tags": [], "summary": "La funci\u00f3n CSS <code>linear-gradient()</code> crea una <a href=\"/es/docs/Web/CSS/image\" title=\"La documentaci&#xF3;n acerca de este tema no ha sido escrita todav&#xED;a . &#xA1;Por favor  considera contribuir !\"><code>&lt;image&gt;</code></a> la cual representa un degradado lineal de colores. El resultado de esta funci\u00f3n es un objeto CSS de tipo dato <a href=\"/es/docs/Web/CSS/gradient\" title=\"La documentaci&#xF3;n acerca de este tema no ha sido escrita todav&#xED;a . &#xA1;Por favor  considera contribuir !\"><code>&lt;gradient&gt;</code></a>. C\u00f3mo cualquier otro degradado, un degradado lineal en CSS no es CSS <a href=\"/es/docs/Web/CSS/color_value\" title=\"El tipo de datos CSS&#xA0;&lt;color&gt;&#xA0;denota un color en el&#xA0;sRGB color space. Un color puede ser descrito en cualquiera de las siguiente maneras:\"><code>&lt;color&gt;</code></a> sino una imagen <a href=\"/en/CSS/image#no_intrinsic\">sin dimensiones intr\u00ednsecas</a>; que significa, que no tiene un tama\u00f1o natural o predefinido, no hay un radio. Su tama\u00f1o concreto se ajustar\u00e1 al del elemento al cual se le aplica.", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2016-06-29T05:39:46", "review_tags": []}], "modified": "2016-08-05T21:15:38", "label": "linear-gradient()", "localization_tags": ["inprogress"], "locale": "de", "id": 159653, "last_edit": "2016-08-05T21:15:27", "summary": "Die CSS <code>linear-gradient()</code> Funktion erstellt ein <a href=\"/de/docs/Web/CSS/image\" title=\"Der &lt;image&gt; CSS Datentyp repr&#xE4;sentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist &#xFC;ber einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverl&#xE4;ufe oder Abbildungen von Teilen der HTML Struktur.\"><code>&lt;image&gt;</code></a> welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS <a href=\"/de/docs/Web/CSS/gradient\" title=\"Der &lt;gradient&gt; CSS Datentyp beschreibt ein &lt;image&gt;, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein &lt;color&gt; Wert, aber ein Bild ohne innere Ma&#xDF;e; das bedeutet, es hat weder eine nat&#xFC;rliche oder bevorzugte Gr&#xF6;&#xDF;e, noch ein bevorzugtes Seitenverh&#xE4;ltnis. Seine konkrete Gr&#xF6;&#xDF;e passt sich dem Element an, dem es zugewiesen wurde.\"><code>&lt;gradient&gt;</code></a> Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS <a href=\"/de/docs/Web/CSS/color_value\" title=\"Die Beschreibung hier&#xFC;ber wurde bisher noch nicht geschrieben; bitte erw&#xE4;ge, mitzuwirken!\"><code>&lt;color&gt;</code></a> sondern ein Bild mit <a href=\"/en/CSS/image#no_intrinsic\" title=\"en/CSS/image#no_intrinsic\">keinen spezifischen Dimensionen</a>; Also hat er weder eine nat\u00fcrliche oder bevorzugte Gr\u00f6\u00dfe, noch ein Gr\u00f6\u00dfenverh\u00e4ltnis. Seine genaue Gr\u00f6\u00dfe wird durch die Gr\u00f6\u00dfe seines zugeh\u00f6rigen Elements bedingt.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Syntax", "title": "Syntax"}, {"id": "Values", "title": "Values"}, {"id": "History_of_the_syntax", "title": "History of the syntax"}, {"id": "Examples", "title": "Examples"}, {"id": "Gradient_at_a_45_degree_angle", "title": "Gradient at a 45 degree angle"}, {"id": "Result", "title": "Result:"}, {"id": "Gradient_that_starts_at_60_of_the_gradient_line", "title": "Gradient that starts at 60% of the gradient line"}, {"id": "Result_2", "title": "Result:"}, {"id": "Gradient_with_multiple_color_stops", "title": "Gradient with multiple color stops"}, {"id": "Result_3", "title": "Result:"}, {"id": "Repeating_a_linear_gradient", "title": "Repeating a linear gradient"}, {"id": "Using_transparency", "title": "Using transparency"}, {"id": "Result_4", "title": "Result:"}, {"id": "Notes", "title": "Notes"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "Cross-browser_gradients", "title": "Cross-browser gradients"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/linear-gradient", "review_tags": ["editorial"]}