{"id":376764,"date":"2023-02-10T07:13:42","date_gmt":"2023-02-10T15:13:42","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376764"},"modified":"2023-02-10T07:13:48","modified_gmt":"2023-02-10T15:13:48","slug":"different-ways-to-get-css-gradient-shadows","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/different-ways-to-get-css-gradient-shadows\/","title":{"rendered":"Different Ways to Get CSS Gradient Shadows"},"content":{"rendered":"\n

It\u2019s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors?<\/em> There is no specific CSS property that does this (believe me, I\u2019ve looked) and any blog post you find about it is basically a lot of CSS tricks to approximate a gradient. We\u2019ll actually cover some of those as we go.<\/p>\n\n\n\n

But first\u2026 another<\/em> article about gradient shadows? Really?<\/p>\n\n\n\n

Yes, this is yet another post on the topic, but it is different. Together, we\u2019re going to push the limits to get a solution that covers something I haven\u2019t seen anywhere else: transparency<\/strong>. Most of the tricks work if the element has a non-transparent background but what if we have a transparent background? We will explore this case here!<\/p>\n\n\n\n

Before we start, let me introduce <\/a>my gradient shadows generator<\/a>. All you have to do is to adjust the configuration, and get the code. But follow along because I\u2019m going to help you understand all the logic behind the generated code.<\/p>\n\n\n\n

<\/p>\n\n\n\n\n\n\n

Table of Contents<\/h2>\n
    \n
  • Non-transparent solution<\/a>\n\n<\/li>\n
  • Transparent solution<\/a>\n\n<\/li>\n
  • Adding a border radius<\/a>\n\n<\/li>\n
  • Wrapping up<\/a>\n<\/li><\/ul><\/div>\n\n

    Non-transparent solution<\/h3>\n\n\n

    Let\u2019s start with the solution that\u2019ll work for 80% of most cases. The most typical case: you are using an element with a background, and you need to add a gradient shadow to it. No transparency issues to consider there.<\/p>\n\n\n\n

    The solution is to rely on a pseudo-element where the gradient is defined. You place it behind the actual element and apply a blur filter to it<\/a>.<\/p>\n\n\n\n

    .box {\n  position: relative;\n}\n.box::before {\n  content: \"\";\n  position: absolute;\n  inset: -5px; \/* control the spread *\/\n  transform: translate(10px, 8px); \/* control the offsets *\/\n  z-index: -1; \/* place the element behind *\/\n  background: \/* your gradient here *\/;\n  filter: blur(10px); \/* control the blur *\/\n}<\/code><\/pre>\n\n\n\n
    It looks like a lot of code, and that\u2019s because it is. Here\u2019s how we could have done it with a box-shadow<\/code><\/a> instead if we were using a solid color instead of a gradient.<\/p>\n\n\n\n
    box-shadow: 10px 8px 10px 5px orange;<\/code><\/pre>\n\n\n\n
    That should give you a good idea of what the values in the first snippet are doing. We have X and Y offsets, the blur radius, and the spread distance. Note that we need a negative value for the spread distance that comes from the inset<\/code><\/a> property.<\/p>\n\n\n\n
    Here\u2019s a demo showing the gradient shadow next to a classic box-shadow<\/code>:<\/p>\n\n\n\n