{"id":61659,"date":"2023-11-09T17:35:17","date_gmt":"2023-11-09T16:35:17","guid":{"rendered":"https:\/\/www.aulatina.com\/tecnicas-de-sombreado-css-para-texto-y-cajas\/"},"modified":"2025-09-29T12:30:19","modified_gmt":"2025-09-29T10:30:19","slug":"css-shading-techniques-for-text-and-boxes","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/tecnicas-de-sombreado-css-para-texto-y-cajas\/","title":{"rendered":"CSS shading techniques for text and boxes"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenido<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #303030;color:#303030\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #303030;color:#303030\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aulatina.com\/en\/tecnicas-de-sombreado-css-para-texto-y-cajas\/#Tecnicas_de_Sombreado_CSS_para_Texto_y_Cajas\" >T\u00e9cnicas de Sombreado CSS para Texto y Cajas<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aulatina.com\/en\/tecnicas-de-sombreado-css-para-texto-y-cajas\/#Sombreado_de_Texto\" >Sombreado de Texto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aulatina.com\/en\/tecnicas-de-sombreado-css-para-texto-y-cajas\/#Sombreado_de_Cajas\" >Sombreado de Cajas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aulatina.com\/en\/tecnicas-de-sombreado-css-para-texto-y-cajas\/#Tecnicas_Avanzadas_de_Sombreado\" >T\u00e9cnicas Avanzadas de Sombreado<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Tecnicas_de_Sombreado_CSS_para_Texto_y_Cajas\"><\/span>T\u00e9cnicas de Sombreado CSS para Texto y Cajas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00bfAlguna vez has querido destacar el texto o las cajas en tu p\u00e1gina web para que se vean m\u00e1s llamativas? Una excelente manera de lograrlo es utilizando t\u00e9cnicas de sombreado en CSS. Estas t\u00e9cnicas permiten agregar sutiles efectos de sombreado a tus elementos, ya sea texto o cajas, para darles un aspecto m\u00e1s sofisticado y atractivo. En este tutorial, te mostrar\u00e9 c\u00f3mo utilizar diferentes propiedades y valores en CSS para lograr sombreados impresionantes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sombreado_de_Texto\"><\/span>Sombreado de Texto<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para <a href=\"https:\/\/www.aulatina.com\/estilizacion-de-texto-y-fuentes-con-css\/\">sombrear el texto en CSS<\/a>, puedes utilizar la propiedad <code>text-shadow<\/code>. Esta propiedad te permite agregar sombra al texto mediante la especificaci\u00f3n de un color de sombra, una posici\u00f3n en la que aparecer\u00e1 la sombra y un desenfoque opcional. Por ejemplo:<\/p>\n<p>[css]<br \/>\nh1 {<br \/>\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>En este ejemplo, el texto se sombrea con un desplazamiento de 2 p\u00edxeles hacia la derecha y hacia abajo, un desenfoque de 4 p\u00edxeles y un color de sombra semi-transparente.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sombreado_de_Cajas\"><\/span>Sombreado de Cajas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para sombrear las cajas en CSS, puedes utilizar la propiedad <code>box-shadow<\/code>. Esta propiedad te permite agregar una sombra a las cajas mediante la especificaci\u00f3n de un color de sombra, una posici\u00f3n en la que aparecer\u00e1 la sombra, un desenfoque opcional, un tama\u00f1o opcional y un modo opcional. Por ejemplo:<\/p>\n<p>[css]<br \/>\ndiv {<br \/>\nbox-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>En este ejemplo, la caja se sombrea con un desplazamiento de 2 p\u00edxeles hacia la derecha y hacia abajo, un desenfoque de 4 p\u00edxeles y un color de sombra semi-transparente.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tecnicas_Avanzadas_de_Sombreado\"><\/span>T\u00e9cnicas Avanzadas de Sombreado<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Adem\u00e1s de las propiedades b\u00e1sicas de sombreado, CSS ofrece otras t\u00e9cnicas m\u00e1s avanzadas para agregar sombreado a tus elementos. Algunas de estas t\u00e9cnicas incluyen el uso de gradientes, im\u00e1genes y transiciones de sombreado. Estas t\u00e9cnicas te permiten lograr efectos m\u00e1s elaborados y personalizados en tus sombreados.<\/p>\n<p>Por ejemplo, si deseas agregar un sombreado con un gradiente en lugar de un color s\u00f3lido, puedes utilizar la funci\u00f3n <code>linear-gradient<\/code> junto con la propiedad <code>background<\/code> o <code>background-image<\/code>. De esta manera, puedes crear sombreados m\u00e1s interesantes y atractivos para tus elementos.<\/p>\n<p>En resumen, las <a href=\"https:\/\/www.aulatina.com\/tecnicas-de-diseno-de-paginas-de-aterrizaje-con-html-y-css\/\">t\u00e9cnicas de sombreado en CSS<\/a> te permiten agregar un toque especial a tus elementos de texto y cajas, haci\u00e9ndolos m\u00e1s llamativos y sofisticados. Puedes experimentar con diferentes combinaciones de propiedades y valores para lograr el efecto deseado. Recuerda que la clave para lograr sombreados efectivos es mantenerlos sutiles y bien equilibrados con el <a href=\"https:\/\/www.aulatina.com\/diseno-web-malaga\/\">dise\u00f1o general de tu p\u00e1gina web<\/a>.<\/p>\n<p>\u00a1No dudes en probar estas t\u00e9cnicas de sombreado en tus proyectos web y darle un aspecto m\u00e1s profesional y atractivo! Si quieres ver un ejemplo en vivo de c\u00f3mo se ve el sombreado en CSS, puedes visitar <a href=\"https:\/\/maps.app.goo.gl\/1kqXymTex12XN2tt7\" target=\"_blank\" rel=\"noopener\">M\u00e1laga<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubre c\u00f3mo resaltar texto y cajas en tu web con T\u00e9cnicas de Sombreado CSS. Aprende a dar un toque llamativo a tus elementos con efectos de sombra sutiles. \u00a1Potencia tu dise\u00f1o web!<\/p>","protected":false},"author":1,"featured_media":61660,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[532],"tags":[534],"class_list":["post-61659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-css","category-532","description-off"],"_links":{"self":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/comments?post=61659"}],"version-history":[{"count":0,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media\/61660"}],"wp:attachment":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media?parent=61659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/categories?post=61659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/tags?post=61659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}