{"id":23971,"date":"2024-01-31T09:59:43","date_gmt":"2024-01-31T08:59:43","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/gradientes-linear-gradient-en-css-como-crear-fondos-degradados\/"},"modified":"2024-06-03T17:33:57","modified_gmt":"2024-06-03T16:33:57","slug":"gradientes-linear-gradient-en-css-como-crear-fondos-degradados","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/","title":{"rendered":"Linear Gradient in CSS: How to Create Gradient Backgrounds"},"content":{"rendered":"<p>Gradients are a popular technique in web design for adding depth and style to a page&#039;s backgrounds. A common type of gradient is the linear gradient, which allows for smooth, linear color transitions. In this article, we will learn how to create linear gradients using CSS and how to use them to create attractive gradient backgrounds.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#%C2%BFQue_es_un_gradient_linear_gradient\" >What is a linear gradient?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Como_crear_un_gradiente_linear_gradient_en_CSS\" >How to create a linear gradient in CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Gradiente_vertical\" >Vertical gradient<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Gradiente_diagonal\" >Diagonal gradient<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Usando_gradientes_linear_gradient_en_diferentes_elementos\" >Using linear gradients on different elements<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Div_con_gradiente_linear_gradient\" >Div with linear gradient<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Texto_con_gradiente_linear_gradient\" >Linear gradient text<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#Preguntas_frecuentes_sobre_gradientes_linear_gradient_en_CSS\" >Frequently asked questions about linear gradients in CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#%C2%BFQue_es_un_gradiente_en_CSS\" >What is a gradient in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#%C2%BFComo_puedo_aplicar_un_gradiente_a_un_fondo_de_pagina_completa\" >How can I apply a gradient to a full page background?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/linear-gradient-gradients-in-css-how-to-create-gradient-backgrounds\/#%C2%BFPuedo_animar_un_gradiente_en_CSS\" >Can I animate a gradient in CSS?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_gradient_linear_gradient\"><\/span>What is a linear gradient?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A linear gradient is a smooth, linear transition between two or more colors. It is used to create gradient backgrounds in which colors gradually blend in a specific direction, either horizontally or vertically.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Como_crear_un_gradiente_linear_gradient_en_CSS\"><\/span>How to create a linear gradient in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To create a linear gradient in CSS, we use the &quot;background-image&quot; property along with the &quot;linear-gradient&quot; value. Here is a code example:<\/p>\n<pre>\n.element { background-image: linear-gradient(to right, #ff0000, #00ff00); }\n<\/pre>\n<p>In this example, we are creating a horizontal gradient background from the color red (#ff0000) to the color green (#00ff00).<\/p>\n<p>We can adjust the direction and colors of the gradient according to our needs. Here are some examples:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Gradiente_vertical\"><\/span>Vertical gradient<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\n.element { background-image: linear-gradient(to bottom, #ff0000, #00ff00); }\n<\/pre>\n<p>In this case, we are creating a vertical gradient background from the color red (#ff0000) to the color green (#00ff00).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Gradiente_diagonal\"><\/span>Diagonal gradient<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\n.element { background-image: linear-gradient(to bottom right, #ff0000, #00ff00); }\n<\/pre>\n<p>Here, we are creating a diagonal gradient background from the top left corner to the bottom right corner, from the red color (#ff0000) to the green color (#00ff00).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Usando_gradientes_linear_gradient_en_diferentes_elementos\"><\/span>Using linear gradients on different elements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Linear gradients can be applied to different HTML elements, such as divs, texts, buttons, etc. Here are some examples:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Div_con_gradiente_linear_gradient\"><\/span>Div with linear gradient<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\n<div class=\"&quot;gradiente&quot;\">\n    ...\n<\/div>\n\n.gradient { background-image: linear-gradient(to right, #ff0000, #00ff00); }\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Texto_con_gradiente_linear_gradient\"><\/span>Linear gradient text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>\n<p class=\"&quot;gradiente&quot;\">\n    This is a gradient text.\n<\/p>\n\n.gradient { background-image: linear-gradient(to right, #ff0000, #00ff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes_sobre_gradientes_linear_gradient_en_CSS\"><\/span>Frequently asked questions about linear gradients in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_gradiente_en_CSS\"><\/span>What is a gradient in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A gradient in CSS is a gradual transition between two or more colors. Gradients can be used to create gradient backgrounds, borders, and other visual effects.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_aplicar_un_gradiente_a_un_fondo_de_pagina_completa\"><\/span>How can I apply a gradient to a full page background?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To apply a gradient to a full page background, you can use the &quot;background&quot; property and specify the gradient as a value.<\/p>\n<pre>\nbody { background: linear-gradient(to right, #ff0000, #00ff00); }\n<\/pre>\n<p>This code will create a horizontal gradient background from red to green that extends across the entire page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_animar_un_gradiente_en_CSS\"><\/span>Can I animate a gradient in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, it is possible to animate a gradient in CSS using the &quot;animation&quot; property. You can specify different gradient values to create smooth transitions between colors.<\/p>\n<pre>\n@keyframes gradient-animation { 0% { background-image: linear-gradient(to right, #ff0000, #00ff00); } 50% { background-image: linear-gradient(to right, #00ff00, #0000ff); } 100% { background-image: linear-gradient(to right, #0000ff, #ff0000); } } .element { animation: gradient-animation 5s infinite; }\n<\/pre>\n<p>In this example, we are animating the gradient on the &quot;item&quot; element for 5 seconds.<\/p>\n<p>Linear gradients are a powerful tool for creating gradient backgrounds and adding visual flair to your web designs. With a little practice and experimentation, you can create stunning visual effects using gradients in your CSS projects.<\/p>\n<p>To learn more about CSS and web development, visit <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. If you have any questions or need help, feel free to contact me via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Los gradientes son una t\u00e9cnica popular en dise\u00f1o web para agregar profundidad y estilo a los fondos de una p\u00e1gina. Un tipo com\u00fan de gradiente es el &quot;linear gradient&quot;, que permite transiciones de color suaves y lineales. En este art\u00edculo, aprenderemos c\u00f3mo crear gradientes linear gradient utilizando CSS y c\u00f3mo usarlos para crear fondos degradados [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1121],"tags":[38,205,340,519,1149,666,712,844,1150],"class_list":["post-23971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css","tag-como","tag-blog","tag-crear","tag-css","tag-degradados","tag-fondos","tag-gradient","tag-gradientes","tag-linear"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23971"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23972"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}