{"id":125054,"date":"2021-09-23T11:51:00","date_gmt":"2021-09-23T11:51:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/"},"modified":"2021-09-23T11:51:00","modified_gmt":"2021-09-23T11:51:00","slug":"como-utilizar-gradientes-no-design-web-tendencias-e-exemplos","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/","title":{"rendered":"Como Utilizar Gradientes no Design Web: Tend\u00eancias e Exemplos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"125054\" class=\"elementor elementor-125054 elementor-77550\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dc07cf3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dc07cf3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a141930\" data-id=\"a141930\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b0932f9 elementor-widget elementor-widget-text-editor\" data-id=\"b0932f9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os gradientes de cor n\u00e3o s\u00e3o novidade no design web. Recorda-se do <a href=\"https:\/\/elementor.com\/blog\/skeuomorphism-ux-design\/\">skeuomorphism<\/a>? Utiliz\u00e1vamos gradientes naquela \u00e9poca para conferir um aspecto tridimensional aos objetos digitais. <\/p>\n<p>No entanto, \u00e0 medida que o design <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noopener\">minimalista<\/a> e o <a href=\"https:\/\/elementor.com\/blog\/flat-design\/\" target=\"_blank\" rel=\"noopener\">flat design<\/a> dominaram a web na d\u00e9cada de 2010, observamos os gradientes serem cada vez mais relegados. N\u00e3o foi porque estivessem ultrapassados, simplesmente os designers n\u00e3o tinham muita utilidade para eles com as tend\u00eancias atuais de design web. <\/p>\n<p>Poder-se-ia argumentar que o redesign do logotipo do Instagram em 2016 deu uma nova vida aos gradientes no design web. Assim que todos viram o que o Instagram podia fazer com a cor, n\u00e3o demorou muito para que come\u00e7\u00e1ssemos a ver gradientes surgindo em toda parte. <\/p>\n<p>Agora, em 2021, os gradientes ainda est\u00e3o vivos e bem. Se est\u00e1 curioso sobre como utiliz\u00e1-los ou apenas deseja uma grande dose de inspira\u00e7\u00e3o, continue a ler.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40aaacf4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"40aaacf4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-187ebc64\" data-id=\"187ebc64\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9cdecf read-more-link elementor-widget elementor-widget-heading\" data-id=\"f9cdecf\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\">Fundamentos da Teoria das Cores que Todo Designer Web Deveria Conhecer<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-962254a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"962254a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-071afdc\" data-id=\"071afdc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc0ef04 blog-toc elementor-widget elementor-widget-heading\" data-id=\"bc0ef04\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00cdndice<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7a62c2 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"e7a62c2\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-are-color-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">O Que S\u00e3o Gradientes?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why-use-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Por Que Utilizar Gradientes no Design Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-create-gradients\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Como Criar Gradientes no Design Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#gradient-design-tips\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Dicas de Design com Gradientes<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#web-design-gradient-trends\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tend\u00eancias e Exemplos de Gradientes no Design Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f682413 elementor-widget elementor-widget-menu-anchor\" data-id=\"f682413\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"o-que-sao-gradientes-de-cor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1d54e6 elementor-widget elementor-widget-heading\" data-id=\"a1d54e6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">O Que \u00c9 Um Gradiente?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f15d90c elementor-widget elementor-widget-text-editor\" data-id=\"f15d90c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Um gradiente \u00e9 uma transi\u00e7\u00e3o gradual de uma cor para outra. Permite aos designers criar praticamente uma nova cor.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Os gradientes fazem os objetos se destacarem ao adicionar uma nova dimens\u00e3o e realismo a um design. Em termos simples, os gradientes adicionam profundidade a uma imagem.<\/span><\/p>\n<p>Podemos tamb\u00e9m referir-nos aos gradientes como <em>mapas<\/em> de cor, uma vez que o <a href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noopener\">esquema de cores<\/a> varia ao longo do gradiente, em oposi\u00e7\u00e3o \u00e0s cores s\u00f3lidas que possuem apenas um c\u00f3digo HEX.<\/p>\n<p>Este \u00e9 um exemplo de um <strong>gradiente linear ou axial<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4b8ea4 elementor-widget elementor-widget-image\" data-id=\"c4b8ea4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1024x576.jpg\" class=\"attachment-large size-large wp-image-77610\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1024x576.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-300x169.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-768x432.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-1536x864.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/1-linear-color-gradient-example-2048x1152.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e76d04c elementor-widget elementor-widget-text-editor\" data-id=\"e76d04c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Este tipo de gradiente come\u00e7a com duas cores em extremidades opostas do elemento. Neste caso, \u00e9 um azul mais claro no canto superior esquerdo e um azul mais escuro no canto inferior direito. A cor transita suavemente entre as duas.<\/p>\n<p>Este \u00e9 um exemplo de um <strong>gradiente radial<\/strong>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11fb306 elementor-widget elementor-widget-image\" data-id=\"11fb306\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1024x576.jpg\" class=\"attachment-large size-large wp-image-77611\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1024x576.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-300x169.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-768x432.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-1536x864.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/2-radial-color-gradient-example-2048x1152.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e97c7e3 elementor-widget elementor-widget-text-editor\" data-id=\"e97c7e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Este tipo de gradiente tamb\u00e9m come\u00e7a com duas cores. No entanto, o verde mais claro come\u00e7a no centro do gr\u00e1fico e irradia para fora at\u00e9 se tornar o verde mais escuro. <\/p>\n<p>Temos visto gradientes de cor serem utilizados em tudo. Desde produtos e embalagens como a linha de perfumes da <a href=\"https:\/\/www.zara.com\/\" target=\"_blank\" rel=\"noopener\">Zara<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a84d5f4 elementor-widget elementor-widget-video\" data-id=\"a84d5f4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/zara-perfume-gradient-product.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88270ad elementor-widget elementor-widget-text-editor\" data-id=\"88270ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At\u00e9 tend\u00eancias de colora\u00e7\u00e3o capilar como as que temos visto em celebridades nos \u00faltimos anos. Celebridades como <a href=\"https:\/\/www.instagram.com\/iamcardib\/\" target=\"_blank\" rel=\"noopener\">Cardi B<\/a>, <a href=\"https:\/\/www.instagram.com\/sarahmgellar\/\" target=\"_blank\" rel=\"noopener\">Sarah Michelle Gellar<\/a> e <a href=\"https:\/\/www.instagram.com\/kyliejenner\/\" target=\"_blank\" rel=\"noopener\">Kylie Jenner<\/a> t\u00eam experimentado com gradientes: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc088dd elementor-widget elementor-widget-image\" data-id=\"fc088dd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1024x633.jpg\" class=\"attachment-large size-large wp-image-77567\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-300x186.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-1536x950.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-02-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc226b5 elementor-widget elementor-widget-text-editor\" data-id=\"dc226b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O espa\u00e7o digital tamb\u00e9m n\u00e3o \u00e9 estranho \u00e0 predomin\u00e2ncia dos gradientes. Os designers de aplicativos t\u00eam explorado gradientes h\u00e1 algum tempo. Em 2016, o <a href=\"https:\/\/techcrunch.com\/2016\/05\/11\/instagrams-big-redesign-goes-live-with-a-colorful-new-icon-black-and-white-app-and-more\/\" target=\"_blank\" rel=\"noopener\">Instagram<\/a> surpreendeu a todos com seu redesenho em gradiente, e agora observe o estado de nossos produtos mais populares:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2987bc elementor-widget elementor-widget-image\" data-id=\"c2987bc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"827\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=827\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons.jpg\" class=\"attachment-large size-large wp-image-77568\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=867\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons.jpg 867w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=290\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons-290x300.jpg 290w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/gradient-app-icons-768x794.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c80d35a elementor-widget elementor-widget-text-editor\" data-id=\"c80d35a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os gradientes de cor s\u00e3o uma <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">tend\u00eancia de design web<\/a> popular atualmente e podem ser aplicados a uma variedade de elementos em um site. Por exemplo: <\/p>\n<ul>\n<li>Logotipos<\/li>\n<li>Elementos de cabe\u00e7alho<\/li>\n<li>Planos de fundo<\/li>\n<li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\" title=\"Tipografia\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"5410\">Tipografia<\/a><\/li>\n<li>\u00cdcones<\/li>\n<li>Fotos<\/li>\n<li>Bot\u00f5es<\/li>\n<\/ul>\n<p>Ao longo deste artigo, examinaremos numerosos exemplos de marcas que demonstram algumas das impressionantes possibilidades que se pode realizar com gradientes no design web.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d76868 elementor-widget elementor-widget-menu-anchor\" data-id=\"3d76868\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"por-que-usar-gradientes\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1041aee elementor-widget elementor-widget-heading\" data-id=\"1041aee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Por Que Utilizar Gradientes no Design Web\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-549600d elementor-widget elementor-widget-text-editor\" data-id=\"549600d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nos \u00faltimos anos, houve um ressurgimento dos gradientes de cor no design web. De forma semelhante ao motivo pelo qual o <a href=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" target=\"_blank\" rel=\"noopener\">Material Design<\/a> e o Flat Design 2.0 se tornaram populares, os gradientes de cor nos oferecem uma maneira de adicionar mais textura, profundidade e dinamismo a uma p\u00e1gina web que, de outra forma, seria plana e sem vida. <\/p>\n<p>Existem outras raz\u00f5es pelas quais utilizamos gradientes em websites: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5779e1 elementor-widget elementor-widget-heading\" data-id=\"c5779e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Para Criar Novos Esquemas de Cores\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-526f80c elementor-widget elementor-widget-text-editor\" data-id=\"526f80c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A regra geral ao escolher uma paleta de cores para um website \u00e9 selecionar no m\u00e1ximo duas ou tr\u00eas cores. Entretanto, em vez de utilizar uma cor de cada vez, os gradientes de cor permitem que voc\u00ea projete com v\u00e1rias cores simultaneamente. <\/p>\n<p>Observe este exemplo do <a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbba4eb elementor-widget elementor-widget-image\" data-id=\"cbba4eb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-77612\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/5-spotify-web-design-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82c67e3 elementor-widget elementor-widget-text-editor\" data-id=\"82c67e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Em vez de utilizar um fundo s\u00f3lido roxo, azul ou preto para a se\u00e7\u00e3o principal, o designer emprega um efeito de gradiente para mescl\u00e1-los.<\/p>\n<p>Este n\u00e3o \u00e9 o \u00fanico lugar onde o Spotify utiliza gradientes. O relat\u00f3rio <a href=\"https:\/\/loudandclear.byspotify.com\/\" target=\"_blank\" rel=\"noopener\">Loud  Clear<\/a> do Spotify est\u00e1 repleto de fundos e anima\u00e7\u00f5es em gradiente:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38533f2 elementor-widget elementor-widget-video\" data-id=\"38533f2\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/loud-and-clear-report-page.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53cb5c8 elementor-widget elementor-widget-text-editor\" data-id=\"53cb5c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Esta escolha de paleta de cores traz muita vida e divers\u00e3o \u00e0 marca Spotify onde quer que usu\u00e1rios e artistas a encontrem online.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d085ca elementor-widget elementor-widget-heading\" data-id=\"3d085ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Para Cativar os Visitantes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-571cb47 elementor-widget elementor-widget-text-editor\" data-id=\"571cb47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A apar\u00eancia de um gradiente de cor por si s\u00f3 pode ser bastante cativante, mesmo que as cores sejam suaves e a transi\u00e7\u00e3o sutil. Dito isso, os gradientes n\u00e3o precisam ser est\u00e1ticos. <\/p>\n<p>Basta observar o website da <a href=\"https:\/\/stripe.com\/\" target=\"_blank\" rel=\"noopener\">Stripe<\/a> para um exemplo de gradientes de cor em movimento:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f03f2e elementor-widget elementor-widget-video\" data-id=\"1f03f2e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/6-stripe-gradient-background.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1841d4a elementor-widget elementor-widget-text-editor\" data-id=\"1841d4a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>H\u00e1 muitas cores em jogo aqui e, ainda assim, n\u00e3o parece excessivo. Em vez disso, a maneira quase semelhante a lava com que elas se misturam cria um efeito imposs\u00edvel de ignorar. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8495bd0 elementor-widget elementor-widget-heading\" data-id=\"8495bd0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Para Ajudar os Visitantes a Focar sua Aten\u00e7\u00e3o\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5395859 elementor-widget elementor-widget-text-editor\" data-id=\"5395859\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Existem v\u00e1rias maneiras de capturar a aten\u00e7\u00e3o de um visitante com o design web. Os gradientes de cor s\u00e3o particularmente \u00fateis nesse aspecto. <\/p>\n<p>Observe este exemplo da <a href=\"https:\/\/www.pepsi.com\/\" target=\"_blank\" rel=\"noopener\">Pepsi<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f846da5 elementor-widget elementor-widget-image\" data-id=\"f846da5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-1024x561.jpg\" class=\"attachment-large size-large wp-image-77613\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/7-pepsi-radial-gradient-background.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-664eff9 elementor-widget elementor-widget-text-editor\" data-id=\"664eff9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Muitas \u00e1reas desta p\u00e1gina inicial cont\u00eam tons s\u00f3lidos de azul. Mas quando os visitantes chegam a este ponto da p\u00e1gina, o gradiente radial deve faz\u00ea-los parar. N\u00e3o \u00e9 por causa do gradiente em si, mas mais pelo efeito de destaque que ele cria ao redor da lata de Pepsi. <\/p>\n<p>Gradientes lineares tamb\u00e9m podem ser utilizados para direcionar a aten\u00e7\u00e3o. Tipicamente, eles s\u00e3o dispostos direcionalmente para ajudar os olhos dos visitantes a se moverem da maneira correta na p\u00e1gina. <\/p>\n<p>O <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> faz isso ao longo de sua p\u00e1gina inicial. Observe esta forma preenchida com gradiente na se\u00e7\u00e3o principal:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6650fff elementor-widget elementor-widget-image\" data-id=\"6650fff\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-77614\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/sketch-hero-image-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3042606 elementor-widget elementor-widget-text-editor\" data-id=\"3042606\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As bordas mais claras do gradiente tendem a receber mais aten\u00e7\u00e3o do que o interior mais escuro. \u00c0 medida que os olhos dos visitantes se movem em dire\u00e7\u00e3o \u00e0s bordas mais claras, a ponta de seta voltada para a direita os direcionar\u00e1 ainda mais para a introdu\u00e7\u00e3o do site. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-285c28f elementor-widget elementor-widget-image\" data-id=\"285c28f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-1024x561.jpg\" class=\"attachment-large size-large wp-image-77615\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/sketch-block-gradients.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3741bb elementor-widget elementor-widget-text-editor\" data-id=\"c3741bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea tamb\u00e9m v\u00ea os gradientes mais abaixo na p\u00e1gina. Novamente, as \u00e1reas mais claras dos blocos ajudam os olhos dos usu\u00e1rios a se concentrarem nas mensagens contidas neles.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52ed3d7 elementor-widget elementor-widget-heading\" data-id=\"52ed3d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Para Tornar o Design Mais Memor\u00e1vel<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb356a5 elementor-widget elementor-widget-text-editor\" data-id=\"bb356a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea se lembra quando o Instagram redesenhou seu logotipo? Foi um grande acontecimento e teve todos falando sobre isso (por raz\u00f5es boas e ruins), como <a href=\"https:\/\/medium.com\/look-and-logo\/rethinking-instagrams-redesign-beyond-the-glyph-and-gradient-619090c7128c\" target=\"_blank\" rel=\"noopener\">Matt Knorr no Medium<\/a>.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5dbc87 elementor-widget elementor-widget-image\" data-id=\"d5dbc87\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1024x633.jpg\" class=\"attachment-large size-large wp-image-77575\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-300x185.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-1536x949.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-04-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58ad986 elementor-widget elementor-widget-text-editor\" data-id=\"58ad986\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Pode n\u00e3o ter sido a melhor escolha em termos de usabilidade, mas deixou uma impress\u00e3o memor\u00e1vel em seus usu\u00e1rios, e esse design em gradiente \u00e9 algo que eles mant\u00eam at\u00e9 hoje. <\/p>\n<p>A <a href=\"https:\/\/www.amdocs.com\/\" target=\"_blank\" rel=\"noopener\">Amdocs<\/a> \u00e9 outra marca que adotou a identidade visual com gradientes:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ca66d4 elementor-widget elementor-widget-video\" data-id=\"2ca66d4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/9-amdocs-gradient-branding.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-712b3c0 elementor-widget elementor-widget-text-editor\" data-id=\"712b3c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os indicadores de menu em gradiente, bot\u00f5es e efeitos de hover da Amdocs destacam-se em acentuado contraste contra o fundo escuro do website. Eles tamb\u00e9m aparecem em \u00e1reas mais extensas, em oposi\u00e7\u00e3o ao Instagram, cuja identidade visual manifesta-se principalmente como detalhes min\u00fasculos dentro do aplicativo e usualmente contra um plano de fundo branco ou cinza. <\/p>\n<p>Al\u00e9m disso, partes fundamentais do texto utilizam uma paleta de cores em gradiente. Isso auxilia a Amdocs a alcan\u00e7ar dois objetivos. O primeiro \u00e9 tornar sua tipografia mais memor\u00e1vel. O segundo \u00e9 enfatizar sua mensagem de marca.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-237e27e elementor-widget elementor-widget-menu-anchor\" data-id=\"237e27e\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-create-gradients\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42ea6cd elementor-widget elementor-widget-heading\" data-id=\"42ea6cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Como Criar Gradientes em Design Web<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b996e8 elementor-widget elementor-widget-text-editor\" data-id=\"8b996e8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Existem tr\u00eas maneiras comuns de criar gradientes para um website: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-047dd75 elementor-widget elementor-widget-heading\" data-id=\"047dd75\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Op\u00e7\u00e3o 1: Utilizar CSS3\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06e9491 elementor-widget elementor-widget-text-editor\" data-id=\"06e9491\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea estiver confort\u00e1vel em codificar estilos em seu <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-wordpress\/\" title=\"site WordPress\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4756\">website WordPress<\/a>, voc\u00ea pode adicionar gradientes dessa maneira. O fragmento de c\u00f3digo ser\u00e1 semelhante a isto: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d0d9a3 elementor-widget elementor-widget-code-highlight\" data-id=\"1d0d9a3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>background: rgb(238,174,202);\r\nbackground: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96fdd93 elementor-widget elementor-widget-text-editor\" data-id=\"96fdd93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>N\u00e3o se preocupe se voc\u00ea n\u00e3o estiver habituado a escrever <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4467\">CSS<\/a> do zero. Voc\u00ea pode utilizar o <a href=\"https:\/\/cssgradient.io\/\" target=\"_blank\" rel=\"noopener\">CSS Gradient<\/a> para criar seus gradientes:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e700f26 elementor-widget elementor-widget-image\" data-id=\"e700f26\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=409\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-1024x523.png\" class=\"attachment-large size-large wp-image-77577\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-1024x523.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-300x153.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool-768x392.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1424\/blog\/wp-content\/uploads\/2021\/09\/10-css-gradient-tool.png 1424w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34f2d08 elementor-widget elementor-widget-text-editor\" data-id=\"34f2d08\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Com esta ferramenta, voc\u00ea pode: <\/p>\n<ul>\n<li>Adicionar ou remover cores<\/li>\n<li>Definir onde elas iniciam e terminam<\/li>\n<li>Aumentar ou diminuir a intensidade<\/li>\n<li>Configurar o gradiente como linear ou radial <\/li>\n<li>Alterar o grau da rota\u00e7\u00e3o\n<\/li>\n<\/ul>\n<p>Quando voc\u00ea concluir a configura\u00e7\u00e3o dos par\u00e2metros, role at\u00e9 o final e obtenha o CSS. <\/p>\n<p>Se voc\u00ea deseja simplificar ainda mais este processo, voc\u00ea pode utilizar o <a href=\"https:\/\/mycolor.space\/gradient3\" target=\"_blank\" rel=\"noopener\">gerador de gradiente de 3 cores do ColorSpace<\/a> em vez disso:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1be1ee elementor-widget elementor-widget-image\" data-id=\"a1be1ee\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-1024x561.jpg\" class=\"attachment-large size-large wp-image-77616\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/11-colorspace-css-generator.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c3229f elementor-widget elementor-widget-text-editor\" data-id=\"6c3229f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Simplesmente escolha as tr\u00eas cores que voc\u00ea deseja utilizar, defina a orienta\u00e7\u00e3o e ent\u00e3o clique em &#8220;Gerar&#8221;. Seus c\u00f3digos CSS aparecer\u00e3o abaixo.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a97c1ec elementor-widget elementor-widget-heading\" data-id=\"a97c1ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Op\u00e7\u00e3o 2: Utilizar Gradientes Pr\u00e9-fabricados\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-379c19e elementor-widget elementor-widget-text-editor\" data-id=\"379c19e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Caso prefira n\u00e3o criar seus pr\u00f3prios gradientes, voc\u00ea sempre pode obter gradientes pr\u00e9-fabricados online.<\/p>\n<p>O <a href=\"https:\/\/uigradients.com\/\" target=\"_blank\" rel=\"noopener\">uiGradients<\/a> \u00e9 uma op\u00e7\u00e3o adequada se voc\u00ea deseja ajuda na cria\u00e7\u00e3o de esquemas de cores de gradiente baseados na cor prim\u00e1ria com a qual est\u00e1 trabalhando: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b02a5c5 elementor-widget elementor-widget-image\" data-id=\"b02a5c5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-1024x561.jpg\" class=\"attachment-large size-large wp-image-77617\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/12-uigradients-generator.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad3c065 elementor-widget elementor-widget-text-editor\" data-id=\"ad3c065\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea pode ent\u00e3o obter o CSS do gradiente que lhe agrada ou salv\u00e1-lo como JPG se desejar utiliz\u00e1-lo como plano de fundo em seu site. <\/p>\n<p>Outra op\u00e7\u00e3o \u00e9 o <a href=\"https:\/\/webgradients.com\/\" target=\"_blank\" rel=\"noopener\">WebGradients.com<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b852a4 elementor-widget elementor-widget-image\" data-id=\"3b852a4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-1024x561.jpg\" class=\"attachment-large size-large wp-image-77618\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/13-webgradients-color-schemes.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4ae2e6 elementor-widget elementor-widget-text-editor\" data-id=\"a4ae2e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea pode salvar estes gradientes como um fragmento CSS, um PNG ou voc\u00ea pode <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/wordpress\/\" title=\"baixar\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"6112\">baixar<\/a> o pacote completo de 180 gradientes para Sketch ou Photoshop (se for onde voc\u00ea est\u00e1 realizando seu design).<\/p>\n<p>O <a href=\"https:\/\/www.grabient.com\/\" target=\"_blank\" rel=\"noopener\">Grabient<\/a> \u00e9 outra ferramenta gratuita que vem com uma abund\u00e2ncia de gradientes de cores pr\u00e9-fabricados. No entanto, voc\u00ea tem um pouco mais de controle sobre como seu gradiente resultar\u00e1: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6a9dcf elementor-widget elementor-widget-image\" data-id=\"e6a9dcf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=409\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-1024x523.jpg\" class=\"attachment-large size-large wp-image-77619\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-1024x523.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-300x153.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator-768x392.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1425\/blog\/wp-content\/uploads\/2021\/09\/14-grabient-color-gradient-generator.jpg 1425w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2e6dd2 elementor-widget elementor-widget-text-editor\" data-id=\"d2e6dd2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea pode alterar a rota\u00e7\u00e3o do gradiente, adicionar ou remover cores e personalizar as porcentagens de cor.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdd2a9f elementor-widget elementor-widget-heading\" data-id=\"cdd2a9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Op\u00e7\u00e3o 3: Criar Gradientes no Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14e30c1 elementor-widget elementor-widget-text-editor\" data-id=\"14e30c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea preferir realizar o trabalho dentro do WordPress, voc\u00ea pode facilmente fazer isso com o <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1195\">Elementor<\/a>.<\/p>\n<p>Para come\u00e7ar, voc\u00ea pode facilmente <a href=\"https:\/\/elementor.com\/blog\/v120-background-gradient\/\" target=\"_blank\" rel=\"noopener\">definir gradientes de cor como plano de fundo<\/a>:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07dc92a elementor-widget elementor-widget-video\" data-id=\"07dc92a\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=q9YQupQt5zs&amp;t=1s&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36f2ec7 elementor-widget elementor-widget-text-editor\" data-id=\"36f2ec7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" target=\"_blank\" rel=\"noopener\">adicionar efeitos de filtro \u00e0s suas imagens e v\u00eddeos<\/a> com o Elementor. Voc\u00ea tem controle total sobre a apar\u00eancia de seus gradientes a partir do painel de Estilo: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbfed9e elementor-widget elementor-widget-video\" data-id=\"cbfed9e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/15-elementor-gradient-editor.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad4cb6a elementor-widget elementor-widget-text-editor\" data-id=\"ad4cb6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>N\u00e3o s\u00e3o apenas os componentes maiores de seu website que voc\u00ea pode adicionar gradientes. Voc\u00ea tamb\u00e9m pode adicionar gradientes a elementos menores como bot\u00f5es:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcfc1a0 elementor-widget elementor-widget-video\" data-id=\"dcfc1a0\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=5z1uM4azviE&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8dd789e elementor-widget elementor-widget-text-editor\" data-id=\"8dd789e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os gradientes de cor s\u00e3o garantidos para atrair aten\u00e7\u00e3o onde quer que sejam utilizados, portanto faz muito sentido utiliz\u00e1-los ao projetar sua chamada para a\u00e7\u00e3o.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dac88b8 elementor-widget elementor-widget-menu-anchor\" data-id=\"dac88b8\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"gradient-design-tips\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c63060 elementor-widget elementor-widget-heading\" data-id=\"9c63060\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dicas de Design de Gradiente\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cae24c elementor-widget elementor-widget-text-editor\" data-id=\"4cae24c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Assim como a paleta de cores de um website, voc\u00ea deve dedicar muita reflex\u00e3o aos seus gradientes de cor. Aqui est\u00e3o algumas dicas a serem consideradas: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83c295d elementor-widget elementor-widget-heading\" data-id=\"83c295d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Adicione uma Terceira Cor aos Seus Gradientes Para Evitar um Centro Acinzentado<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60d7d15 elementor-widget elementor-widget-text-editor\" data-id=\"60d7d15\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea deseja projetar um gradiente atraente, voc\u00ea necessitar\u00e1 mais do que duas cores para ele: <\/p>\n<ul>\n<li>Uma para um &lt;lado-ou-canto&gt;<\/li>\n<li>Uma para a &lt;parada-de-cor-linear&gt;<\/li>\n<li>Uma para o outro &lt;lado-ou-canto&gt;<\/li>\n<\/ul>\n<p>Se voc\u00ea n\u00e3o definir uma &lt;parada-de-cor-linear&gt; intermedi\u00e1ria, h\u00e1 a possibilidade de que o gradiente n\u00e3o fa\u00e7a a transi\u00e7\u00e3o t\u00e3o suavemente e voc\u00ea acabar\u00e1 com uma cor acinzentada entre elas. Como isto: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9387ab elementor-widget elementor-widget-image\" data-id=\"b9387ab\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-1024x561.jpg\" class=\"attachment-large size-large wp-image-77620\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/16-cssgradient-2-color-gradient.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83f08cb elementor-widget elementor-widget-text-editor\" data-id=\"83f08cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ao definir um valor de cor entre os dois valores de &lt;lado-ou-canto&gt;, voc\u00ea pode prevenir que isso aconte\u00e7a. Aqui est\u00e1 uma maneira de corrigir isso: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da33efc elementor-widget elementor-widget-image\" data-id=\"da33efc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=495\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1024x633.jpg\" class=\"attachment-large size-large wp-image-77587\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1024x633.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-300x186.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-768x475.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-1536x950.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2021\/09\/9.9.21-gradient-blog-assets-2-01-2048x1266.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a90955e elementor-widget elementor-widget-text-editor\" data-id=\"a90955e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Caso deseje criar uma amostra vibrante de cor, o terceiro valor crom\u00e1tico apresenta-se como uma solu\u00e7\u00e3o simples para essa quest\u00e3o. Caso prefira manter o gradiente mais sutil, procure identificar valores crom\u00e1ticos que guardem semelhan\u00e7a entre si. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6991523 elementor-widget elementor-widget-heading\" data-id=\"6991523\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Selecione uma Cor Prim\u00e1ria que Transmita os Sinais Adequados<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80a7a68 elementor-widget elementor-widget-text-editor\" data-id=\"80a7a68\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>N\u00e3o obstante esteja criando um efeito crom\u00e1tico singular com um gradiente, isso n\u00e3o implica que a <a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">teoria das cores<\/a> possa ser desconsiderada. Assegure-se de selecionar uma cor prim\u00e1ria que estabele\u00e7a a atmosfera apropriada e transmita as emo\u00e7\u00f5es desejadas. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b333425 elementor-widget elementor-widget-heading\" data-id=\"b333425\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Permita o Contraste Crom\u00e1tico, mas Evite o Conflito<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1232628 elementor-widget elementor-widget-text-editor\" data-id=\"1232628\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>H\u00e1 uma distin\u00e7\u00e3o significativa entre <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">cores que contrastam<\/a> entre si e aquelas que simplesmente n\u00e3o harmonizam. <\/p>\n<p>Utilize a <a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noopener\">ferramenta de c\u00edrculo crom\u00e1tico do Canva<\/a> para explorar op\u00e7\u00f5es vi\u00e1veis:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-818f08e elementor-widget elementor-widget-video\" data-id=\"818f08e\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/18-canva-color-wheel.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a31abe6 elementor-widget elementor-widget-text-editor\" data-id=\"a31abe6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Defina sua cor prim\u00e1ria no primeiro campo. Em seguida, empregue o gerador de combina\u00e7\u00f5es crom\u00e1ticas para explorar pares de cores para seu gradiente.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-483ad6d elementor-widget elementor-widget-heading\" data-id=\"483ad6d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Mantenha-se Sempre Ciente da Localiza\u00e7\u00e3o de Sua Fonte de Luz<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e766a elementor-widget elementor-widget-text-editor\" data-id=\"b9e766a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Mesmo que seu gradiente resulte em um aspecto mais surreal do que natural, \u00e9 imperativo projet\u00e1-lo considerando uma fonte de luz. A dire\u00e7\u00e3o da qual a fonte de luz prov\u00e9m determinar\u00e1 o tipo de gradiente a ser utilizado (linear versus radial) e qu\u00e3o luminosa deve ser a extremidade mais clara do gradiente. <\/p>\n<p>Por exemplo, a p\u00e1gina do <a href=\"https:\/\/readymag.com\/u18071539\/934962\/\" target=\"_blank\" rel=\"noopener\">EMBA para Eur\u00e1sia<\/a> apresenta uma fonte de luz distinta proveniente do lado direito: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9818c2d elementor-widget elementor-widget-image\" data-id=\"9818c2d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-1024x561.jpg\" class=\"attachment-large size-large wp-image-77621\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/emba-gradient-light.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5817b6f elementor-widget elementor-widget-text-editor\" data-id=\"5817b6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Este design de gradiente assemelha-se aos tipos de gradientes que observar\u00edamos durante o nascer ou o p\u00f4r do sol em uma paisagem deslumbrante.<\/p>\n<p>Pode-se tamb\u00e9m utilizar a direcionalidade do gradiente para conduzir os visitantes de maneira mais eficiente atrav\u00e9s da p\u00e1gina e aos seus elementos mais relevantes \u2014 que devem estar situados na extremidade mais clara. <\/p>\n<p>O website <a href=\"https:\/\/orson.ai\/\" target=\"_blank\" rel=\"noopener\">Orson<\/a> apresenta um exemplo interessante deste conceito:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9283e6a elementor-widget elementor-widget-video\" data-id=\"9283e6a\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/orson-hero-gradient-design.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56eeb73 elementor-widget elementor-widget-text-editor\" data-id=\"56eeb73\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O orbe de gradiente animado desempenha m\u00faltiplas fun\u00e7\u00f5es neste contexto. Primeiramente, ele enfatiza de maneira not\u00e1vel a mensagem principal de &#8220;Construindo Confian\u00e7a&#8221;. Em segundo lugar, as \u00e1reas mais claras em conjunto com a anima\u00e7\u00e3o conferem a este site uma sensa\u00e7\u00e3o de dinamismo, devendo impelir os visitantes a prosseguir para descobrir o que mais lhes aguarda. <\/p>\n<p>Pode-se tamb\u00e9m empregar <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">o princ\u00edpio de design<\/a> da hierarquia visual para alterar a propor\u00e7\u00e3o de luz versus escurid\u00e3o ao longo do gradiente, indicando indiretamente aos visitantes onde focar sua aten\u00e7\u00e3o.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb723a7 elementor-widget elementor-widget-heading\" data-id=\"fb723a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Seja Cauteloso com o Efeito de Bandas<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe317aa elementor-widget elementor-widget-text-editor\" data-id=\"fe317aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bandas s\u00e3o linhas que se manifestam dentro de gradientes de cor. Assim, em vez de observar uma transi\u00e7\u00e3o suave de uma cor para a outra, os visitantes perceber\u00e3o uma sutil delinea\u00e7\u00e3o entre os valores crom\u00e1ticos. <\/p>\n<p>Eis um exemplo: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d7f941 elementor-widget elementor-widget-image\" data-id=\"0d7f941\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"273\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=273\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-1024x349.png\" class=\"attachment-large size-large wp-image-77590\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-1024x349.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-300x102.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding-768x262.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1115\/blog\/wp-content\/uploads\/2021\/09\/19-grabient-color-gradient-example-with-banding.png 1115w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe0a561 elementor-widget elementor-widget-text-editor\" data-id=\"fe0a561\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Isso ocorre quando n\u00e3o h\u00e1 valores crom\u00e1ticos suficientes para preencher completamente o gradiente. Existem diversas raz\u00f5es para a ocorr\u00eancia desse fen\u00f4meno. <\/p>\n<p>Primeiramente, a profundidade de bits da imagem pode ser insuficiente. Trata-se tamb\u00e9m de algo mais comum em imagens de grandes dimens\u00f5es. Isso se deve ao fato de que imagens grandes criam uma dist\u00e2ncia excessiva entre as duas cores para cobrir suavemente o espa\u00e7o entre elas. Ademais, se houver um contraste acentuado entre suas cores, \u00e9 mais prov\u00e1vel que se observe esse efeito.<\/p>\n<p>Caso esteja enfrentando dificuldades com o efeito de bandas, utilize seu software de edi\u00e7\u00e3o de imagens para tentar suavizar essas bandas por meio de configura\u00e7\u00f5es de ru\u00eddo e pontilhamento. Alternativamente, pode ser necess\u00e1rio experimentar outras cores.<\/p>\n<p>Observe o que acontece quando o gradiente acima utiliza cores mais an\u00e1logas ao longo de sua extens\u00e3o: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa245f elementor-widget elementor-widget-image\" data-id=\"0fa245f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"272\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=272\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-1024x348.png\" class=\"attachment-large size-large wp-image-77591\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-1024x348.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-300x102.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding-768x261.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1111\/blog\/wp-content\/uploads\/2021\/09\/20-grabient-color-gradient-example-without-banding.png 1111w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14fe51c elementor-widget elementor-widget-text-editor\" data-id=\"14fe51c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A maior parte do efeito de bandas foi eliminada desta amostra de cor. Pode n\u00e3o ser a paleta mais vibrante, mas n\u00e3o confere mais um aspecto artificial ao gradiente. <\/p>\n<p>Analisemos um exemplo do mundo real sobre como proceder nessa situa\u00e7\u00e3o. Este exemplo prov\u00e9m do <a href=\"https:\/\/ur-bureau.com\/\" target=\"_blank\" rel=\"noopener\">UR Bureau<\/a> e demonstra como \u00e9 poss\u00edvel criar um gradiente vibrante sem recorrer a combina\u00e7\u00f5es crom\u00e1ticas extremas: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89df712 elementor-widget elementor-widget-image\" data-id=\"89df712\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-1024x561.png\" class=\"attachment-large size-large wp-image-77592\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-1024x561.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-300x164.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient-768x421.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/ur-bureau-bright-gradient.png 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d3e456 elementor-widget elementor-widget-text-editor\" data-id=\"2d3e456\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00c9 importante ressaltar que esta n\u00e3o \u00e9 uma regra r\u00edgida a ser seguida irrestritamente. Existem in\u00fameros web designers que utilizam gradientes extremos sem se deparar com o problema do efeito de bandas. Frequentemente, emprega-se o desfoque e os gradientes assumem uma apar\u00eancia mais pr\u00f3xima ao estilo bokeh. <\/p>\n<p>Eis um exemplo desse tipo, proveniente de <a href=\"https:\/\/www.virgileguinard.fr\/\" target=\"_blank\" rel=\"noopener\">Virgile Guinard<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f530a2a elementor-widget elementor-widget-image\" data-id=\"f530a2a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-1024x561.png\" class=\"attachment-large size-large wp-image-77593\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-1024x561.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-300x164.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design-768x421.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/virgile-guinard-gradient-design.png 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec660e6 elementor-widget elementor-widget-text-editor\" data-id=\"ec660e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>E outro, da <a href=\"https:\/\/jemima.work\/Info\" target=\"_blank\" rel=\"noopener\">designer gr\u00e1fica Jemima<\/a>: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3332f65 elementor-widget elementor-widget-image\" data-id=\"3332f65\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-1024x561.jpg\" class=\"attachment-large size-large wp-image-77595\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/jemima-gradient-background.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebd6fc6 elementor-widget elementor-widget-text-editor\" data-id=\"ebd6fc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trata-se de uma escolha de design que estamos observando com crescente frequ\u00eancia nos websites de profissionais criativos. Desde que n\u00e3o comprometam a apar\u00eancia dos portf\u00f3lios dos artistas, essas escolhas que desafiam as regras podem funcionar excepcionalmente bem. <\/p>\n<p>A <a href=\"https:\/\/zeusjones.com\/\" target=\"_blank\" rel=\"noopener\">Zeus Jones<\/a> \u00e9 uma ag\u00eancia criativa que optou por gradientes que ultrapassam os limites convencionais. Este plano de fundo animado aparece apenas no topo da p\u00e1gina inicial:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b9a594 elementor-widget elementor-widget-video\" data-id=\"7b9a594\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/zeus-jones-gradient-hero.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02b7b72 elementor-widget elementor-widget-text-editor\" data-id=\"02b7b72\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O restante do site utiliza cores de fundo s\u00f3lidas e contrastantes para garantir que o trabalho e a mensagem permane\u00e7am livres de distra\u00e7\u00f5es.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58aa7c4 elementor-widget elementor-widget-menu-anchor\" data-id=\"58aa7c4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"tendncias-de-gradientes-no-design-web\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbcf290 elementor-widget elementor-widget-heading\" data-id=\"fbcf290\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">6. Exemplos de Gradientes Impressionantes em Design Web\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a877d0 elementor-widget elementor-widget-text-editor\" data-id=\"3a877d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>H\u00e1 in\u00fameras maneiras pelas quais os designers est\u00e3o empregando gradientes na web atualmente. Vamos examinar algumas das tend\u00eancias mais proeminentes: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cee42a6 elementor-widget elementor-widget-heading\" data-id=\"cee42a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Gradientes Suaves e Sutis \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc7ef45 elementor-widget elementor-widget-video\" data-id=\"dc7ef45\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/21-recess-homepage-gradient-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03f1942 elementor-widget elementor-widget-text-editor\" data-id=\"03f1942\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A p\u00e1gina inicial da <a href=\"https:\/\/takearecess.com\/\" target=\"_blank\" rel=\"noopener\">Recess<\/a> apresenta diversos gradientes, mas o que merece destaque surge aproximadamente na metade da p\u00e1gina. O plano de fundo azul celeste transiciona gradualmente para um tom rosado. Quando os visitantes rolam a p\u00e1gina para ler o conte\u00fado e observar os elementos gr\u00e1ficos, \u00e9 poss\u00edvel que n\u00e3o percebam imediatamente a transi\u00e7\u00e3o at\u00e9 que o plano de fundo tenha se transformado em um tom de rosa consideravelmente mais escuro. <\/p>\n<p>A <a href=\"https:\/\/foundation.gucci.com\/\" target=\"_blank\" rel=\"noopener\">Gucci Beauty<\/a> \u00e9 outro exemplo not\u00e1vel de gradientes suaves em a\u00e7\u00e3o: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbcb4a0 elementor-widget elementor-widget-video\" data-id=\"dbcb4a0\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/gucci-beauty-gradient-background.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b525de elementor-widget elementor-widget-text-editor\" data-id=\"2b525de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Este, no entanto, n\u00e3o requer que os visitantes rolem a p\u00e1gina para experimentar o deleite visual. O plano de fundo rotativo de gradientes suaves est\u00e1 posicionado acima da dobra.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0b6a44 elementor-widget elementor-widget-heading\" data-id=\"d0b6a44\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Planos de Fundo com Gradientes Multicoloridos\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-940b6cd elementor-widget elementor-widget-text-editor\" data-id=\"940b6cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O <a href=\"https:\/\/www.kikk.be\/2021\/\" target=\"_blank\" rel=\"noopener\">Festival KIKK<\/a> sempre apresenta um website extravagante para promover sua confer\u00eancia anual. Este \u00e9 um excelente exemplo de como manipular numerosas cores em um \u00fanico gradiente sem que pare\u00e7a excessivo. Distribu\u00eddo ao longo de toda a extens\u00e3o da p\u00e1gina inicial, as cores transitam lentamente de uma para outra. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eebcc34 elementor-widget elementor-widget-heading\" data-id=\"eebcc34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Efeitos de Gradientes que Intensificam o Estado de \u00c2nimo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1af5c0b elementor-widget elementor-widget-video\" data-id=\"1af5c0b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/25-airoceancargo-music-gradient.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd3e32d elementor-widget elementor-widget-text-editor\" data-id=\"dd3e32d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A <a href=\"https:\/\/www.airoceancargo.com\/it\/\" target=\"_blank\" rel=\"noopener\">Air Ocean Cargo<\/a> \u00e9 um exemplo particularmente interessante. Sua mensagem \u00e9 semelhante \u00e0 da Recess, no sentido de que convida os visitantes a &#8220;Relaxar&#8221;. Contudo, sua utiliza\u00e7\u00e3o de gradientes \u00e9 substancialmente diferente. <\/p>\n<p>Neste caso, observamos um gradiente radial que se movimenta em sincronia com o ritmo estimulante e cativante da m\u00fasica reproduzida no site. A cor do gradiente se altera se o visitante mudar a m\u00fasica utilizando o controlador no canto superior direito. Quando o visitante pausa a m\u00fasica, o gradiente se transforma em uma suave forma de halo.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4842f11 elementor-widget elementor-widget-heading\" data-id=\"4842f11\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Gradientes 3D\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88a8465 elementor-widget elementor-widget-video\" data-id=\"88a8465\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/23-juliebonnemoy-portfolio-gradients.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8b33af elementor-widget elementor-widget-text-editor\" data-id=\"e8b33af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O <a href=\"https:\/\/juliebonnemoy.com\/\" target=\"_blank\" rel=\"noopener\">portf\u00f3lio de design freelance de Julie Bonnemoy<\/a> apresenta um efeito reminiscente de uma l\u00e2mpada de lava como seu elemento gr\u00e1fico principal. As formas 3D flutuam pela se\u00e7\u00e3o, ocasionalmente revelando a mensagem de boas-vindas de Julie aos visitantes. O design do gradiente iridescente \u00e9 indubitavelmente cativante e instiga a curiosidade sobre quais outros tipos de espet\u00e1culos visuais seu portf\u00f3lio reserva.<\/p>\n<p>O <a href=\"http:\/\/adova-group.com\/\" target=\"_blank\" rel=\"noopener\">Grupo Adova<\/a> tem como miss\u00e3o auxiliar as pessoas a relaxarem (neste caso, ajud\u00e1-las a dormir melhor). \u00c9 uma tend\u00eancia digna de nota se voc\u00ea estiver projetando um site para uma marca com uma miss\u00e3o similar. Evidentemente, h\u00e1 uma correla\u00e7\u00e3o entre a ideia de relaxamento e a apar\u00eancia e sensa\u00e7\u00e3o dos gradientes:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a53739b elementor-widget elementor-widget-video\" data-id=\"a53739b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/24-adovagroup-surreal-gradient-landscape.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad7000c elementor-widget elementor-widget-text-editor\" data-id=\"ad7000c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Mesmo que voc\u00ea esteja projetando um website para algu\u00e9m fora do setor de sa\u00fade e bem-estar, ainda \u00e9 poss\u00edvel extrair inspira\u00e7\u00e3o deste panorama 3D surreal. Observe o que acontece com a esfera ao final deste GIF. O design do gradiente confere ao elemento de visualiza\u00e7\u00e3o de dados, agora transformado, uma apar\u00eancia tridimensional. Isoladamente, este \u00e9 um conceito not\u00e1vel que pode ser aplicado a uma variedade de websites.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f7b3b2 elementor-widget elementor-widget-heading\" data-id=\"9f7b3b2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Gradientes em Imagens de Websites<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b399550 elementor-widget elementor-widget-text-editor\" data-id=\"b399550\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nem sempre \u00e9 simples encontrar a fotografia bruta ideal para um website. Felizmente, dispomos de numerosas ferramentas que facilitam o ajuste da cor de nossas imagens ou a adi\u00e7\u00e3o de filtros a elas, permitindo que transmitam exatamente a apar\u00eancia e a atmosfera desejadas. <\/p>\n<p>Ao selecionar filtros de cor, considere aplicar um filtro gradiente como a <a href=\"https:\/\/landing.adobe.com\/en\/na\/products\/marketing-cloud\/ctir-3108-running-on-experience\/index.html\" target=\"_blank\" rel=\"noopener\">Adobe<\/a> faz aqui: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ca2bf6 elementor-widget elementor-widget-image\" data-id=\"9ca2bf6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-1024x561.jpg\" class=\"attachment-large size-large wp-image-77604\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/adobe-running-on-experience.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717a6cb elementor-widget elementor-widget-text-editor\" data-id=\"717a6cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\" title=\"p\u00e1gina de destino\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2493\">p\u00e1gina de destino<\/a> Running on Experience apresenta diversos filtros de gradiente em imagens como este. Eis outro exemplo: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b3875c elementor-widget elementor-widget-image\" data-id=\"0b3875c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=438\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-1024x561.jpg\" class=\"attachment-large size-large wp-image-77605\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-1024x561.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-300x164.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess-768x421.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/09\/adobe-runningonexperience-assess.jpg 1440w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d358608 elementor-widget elementor-widget-text-editor\" data-id=\"d358608\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Estes gradientes em imagens s\u00e3o interessantes porque n\u00e3o seguem o padr\u00e3o t\u00edpico de mistura de uma cor para outra. Apenas o sujeito da fotografia est\u00e1 imerso em um filtro de gradiente. <\/p>\n<p>Como este relat\u00f3rio trata integralmente sobre transforma\u00e7\u00e3o, o filtro de gradiente funciona quase como uma representa\u00e7\u00e3o simb\u00f3lica da transforma\u00e7\u00e3o pela qual o sujeito est\u00e1 passando. \u00c9 somente na \u00faltima imagem que a vemos completamente livre de qualquer filtro ou gradiente. <\/p>\n<p>Outra maneira de experimentar com gradientes em imagens \u00e9 utilizar um filtro de cor \u00fanica e atenu\u00e1-lo gradualmente. Isso essencialmente transforma os lados transparente e opaco do filtro em duas cores distintas. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0c7a4 elementor-widget elementor-widget-heading\" data-id=\"6a0c7a4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Gradientes em Bot\u00f5es de Chamada para A\u00e7\u00e3o\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-addf362 elementor-widget elementor-widget-text-editor\" data-id=\"addf362\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O <a href=\"https:\/\/www.jlobeauty.com\/\" target=\"_blank\" rel=\"noopener\">website da JLo Beauty<\/a> \u00e9 repleto de brilho iridescente, desde seus gr\u00e1ficos de fundo at\u00e9 suas fotos de produtos. Os bot\u00f5es n\u00e3o s\u00e3o diferentes em termos de estilo, mas o s\u00e3o em termos de como reagem ao toque dos visitantes:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38de13f elementor-widget elementor-widget-video\" data-id=\"38de13f\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/29-jlobeauty-gradient-buttons.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37e5f74 elementor-widget elementor-widget-text-editor\" data-id=\"37e5f74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Quando algu\u00e9m passa o cursor sobre qualquer um dos bot\u00f5es &#8220;Adicionar ao Carrinho&#8221;, o gradiente de cor ganha vida por apenas um segundo. <\/p>\n<p>N\u00e3o \u00e9 necess\u00e1rio fazer todo o design do bot\u00e3o em gradiente se n\u00e3o desejar. <a href=\"https:\/\/wearecroma.it\/\" target=\"_blank\" rel=\"noopener\">Croma<\/a>, por exemplo, utiliza gradientes estrategicamente em seu site. Um uso para eles \u00e9 como uma anima\u00e7\u00e3o de bot\u00e3o acionada ao passar o cursor: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b666337 elementor-widget elementor-widget-video\" data-id=\"b666337\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/croma-button-gradients.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c807c3 elementor-widget elementor-widget-text-editor\" data-id=\"9c807c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00c0 medida que o usu\u00e1rio passa o cursor sobre cada uma das caixas ou bot\u00f5es clic\u00e1veis, uma borda em gradiente aparece. Este mesmo tipo de efeito de confirma\u00e7\u00e3o ao passar o cursor seria \u00fatil na navega\u00e7\u00e3o.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d11fa0 elementor-widget elementor-widget-heading\" data-id=\"2d11fa0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Imagens com Gradientes Naturais\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db0004d elementor-widget elementor-widget-text-editor\" data-id=\"db0004d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Gradientes ocorrem naturalmente em nosso mundo. Basta olhar para o c\u00e9u ou o oceano para v\u00ea-los. Ao selecionar imagens para seu site, considere integrar seus pr\u00f3prios gradientes em seu design, como <a href=\"https:\/\/www.honesttea.com\/\" target=\"_blank\" rel=\"noopener\">Honest Tea<\/a> fez aqui. Isso cria um efeito realmente \u00fanico que certamente surpreender\u00e1 muitos visitantes (de maneira positiva).<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7fe628 elementor-widget elementor-widget-video\" data-id=\"a7fe628\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/09\/31-honesttea-image-with-gradient-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d7ae0c elementor-widget elementor-widget-heading\" data-id=\"5d7ae0c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Utilize Gradientes para Criar uma Experi\u00eancia Empolgante<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-294bd8c elementor-widget elementor-widget-text-editor\" data-id=\"294bd8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea est\u00e1 em busca de uma maneira divertida e \u00fanica de dar vida aos websites de seus clientes, os gradientes de cor podem ser a tend\u00eancia de design web a experimentar este ano. Eles n\u00e3o apenas tornam cores s\u00f3lidas e planas mais vibrantes e atraentes visualmente, mas tamb\u00e9m s\u00e3o \u00fateis para focar a aten\u00e7\u00e3o e melhorar o engajamento. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Caso esteja \u00e0 procura de uma forma divertida e \u00fanica de dar vida aos websites dos seus clientes, os gradientes de cor podem ser a tend\u00eancia de design web a experimentar este ano. Neste artigo, discutiremos a utiliza\u00e7\u00e3o de gradientes e forneceremos dicas e exemplos inspiradores.<\/p>\n","protected":false},"author":2024198,"featured_media":125055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[308,360,300],"tags":[409],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-125054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration-pt","category-design-pt","category-elementor-team-writes-pt","tag-construir"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor<\/title>\n<meta name=\"description\" content=\"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor\" \/>\n<meta property=\"og:description\" content=\"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-23T11:51:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png\" \/>\n<meta name=\"author\" content=\"Shely Vaisman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shely Vaisman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\"},\"author\":{\"name\":\"Shely Vaisman\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\"},\"headline\":\"Como Utilizar Gradientes no Design Web: Tend\u00eancias e Exemplos\",\"datePublished\":\"2021-09-23T11:51:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\"},\"wordCount\":3874,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"keywords\":[\"Construir\"],\"articleSection\":[\"Inspira\u00e7\u00e3o\",\"Projeto\",\"Reda\u00e7\u00f5es da equipe Elementor\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\",\"name\":\"Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"datePublished\":\"2021-09-23T11:51:00+00:00\",\"description\":\"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png\",\"width\":1201,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projeto\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Utilizar Gradientes no Design Web: Tend\u00eancias e Exemplos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7\",\"name\":\"Shely Vaisman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g\",\"caption\":\"Shely Vaisman\"},\"description\":\"Shely is a Web Designer at Elementor. When she\u2019s not obsessing over illustration and UI design, you can find her practicing Yoga and listening to music.\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/shelyv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor","description":"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor","og_description":"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-09-23T11:51:00+00:00","og_image":[{"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-06.png","type":"","width":"","height":""}],"author":"Shely Vaisman","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Shely Vaisman","Est. tempo de leitura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/"},"author":{"name":"Shely Vaisman","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7"},"headline":"Como Utilizar Gradientes no Design Web: Tend\u00eancias e Exemplos","datePublished":"2021-09-23T11:51:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/"},"wordCount":3874,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","keywords":["Construir"],"articleSection":["Inspira\u00e7\u00e3o","Projeto","Reda\u00e7\u00f5es da equipe Elementor"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/","name":"Como Utilizar Gradientes no Design Web e 6 Exemplos Impressionantes | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","datePublished":"2021-09-23T11:51:00+00:00","description":"A cor \u00e9 parte integrante do design web. Contudo, ao inv\u00e9s de depender estritamente de cores s\u00f3lidas e filtros, este guia ir\u00e1 apresentar-lhe os gradientes de cor e como incorpor\u00e1-los no design web.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/09\/15.08.2021_GRADIENTS-IN-WEB-DESIGN-TRENDS-_-EXAMPLES_BLOG-07.png","width":1201,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-gradientes-no-design-web-tendencias-e-exemplos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Projeto","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/"},{"@type":"ListItem","position":3,"name":"Como Utilizar Gradientes no Design Web: Tend\u00eancias e Exemplos"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/aabd497446c43741ebd68357aad2fad7","name":"Shely Vaisman","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d28365ea985a0b0097d34c9bded809f448e5c7b935b281f6f06b715165d1f90f?s=96&d=mm&r=g","caption":"Shely Vaisman"},"description":"Shely is a Web Designer at Elementor. When she\u2019s not obsessing over illustration and UI design, you can find her practicing Yoga and listening to music.","url":"https:\/\/elementor.com\/blog\/pt-br\/author\/shelyv\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024198"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=125054"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125054\/revisions"}],"predecessor-version":[{"id":125058,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125054\/revisions\/125058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/125055"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=125054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=125054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=125054"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=125054"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=125054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}