Blur background for specific shaped polygon within svg element

<svg
  viewBox="0 0 100 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  className="ml-10 mt-12 justify-center w-[4.5rem]  h-[4.5rem] 1000:h-40 1000:w-40 1000:ml-10  "
>
  <polygon
    fill="rgba(255, 255, 255, 0.5)"
    fillOpacity=".3"
    stroke="#C85083"
    strokeWidth="3"
    className="backdrop-blur-md"
    points="50 1 95 25 95 75 50 99 5 75 5 25"
    >
  </polygon>
</svg>

Although I'm incorporating Tailwind into my project, the backdrop filter blur isn't working on my polygon shape. Any suggestions on how to fix this?

htmlcsssvgtailwind-csspolygon

Answer №1

Remember to utilize the class attribute, rather than className.

In this scenario, I've taken the class code snippet from the Tailwind documentation, and infused a gradient to mimic your desired background:

svg {
     background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon
    fill="rgba(255, 255, 255, 0.5)"
    fillOpacity=".3"
    stroke="#C85083"
    strokeWidth="3"
    class="backdrop-blur-md"
    points="50 1 95 25 95 75 50 99 5 75 5 25"
    >
  </polygon>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble arises when attempting to include numerous Visualforce components on a single page

When using a visualforce component multiple times on a page, the hover function does not open any of the dialogs. The problem seems to be related to the ids but I'm unsure about how to resolve it. Below is an example of the code for the visualforce c ...

csscomponentsvisualforce

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

htmlcss

Is jQuery the key to Masonry's stacking magic?

Hey there, I could really use some assistance with my website at this link: I thought jQuery Masonry would stack the objects closely together, but when I randomize the div boxes, there are large gaps between them. Can anyone explain why this is happening? ...

phpjquerycsswordpress

a pathway leading to the user's profile

I have successfully implemented a code that displays a list of people who are at level 8, which can be seen below https://i.sstatic.net/bJ9VX.png Now, I want to make it so that when a user clicks on the username of the individuals listed, they will be re ...

phphtml

Activate a change or response when the input value in Javascript is altered

Currently, I am working on a small project using JQuery and facing an issue when trying to remove error classes from HTML elements. To handle the removal of the error classes, I am utilizing $('selector').on('input') event to target th ...

javascriptjqueryhtmlevent-handling

Using the curl command, incorporate JSON data into an already established array

I've been working with PHP to use curl and send an HTML post request. My goal is to include additional data to an existing JSON array located at a particular URL. When I send the request, I'm unsure if the data will be replaced or added to the ex ...

phphtmljsoncurlpost

How can I change the ActionLink in a MVC3 Grid column to an <a> tag?

Is there a way to swap out the MVC3 Grid column ActionLink with an <a> tag instead? grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "delete-button" } ), style: "column-action") ...

htmlasp.net-mvc-3

The functionality of the Dynamic TailwindCSS class is experiencing difficulties in functioning correctly

After reviewing my code snippet: <template> <section class="bg-gradient-to-br h-40" :class=" 'from-palettes-' + palette + '-primary to-palates-' + palette + '-secondary& ...

vue.jstailwind-css

Elements listed are often ignored by HTML

My website sends a URL and xpath query to the server in order to extract data from the URL based on the xpath query. While it is functioning properly, I am encountering a singular issue. When I specify an xpath query for href,text, it displays a list of a ...

javascripthtmlxmlxpath

Is it possible to retrieve metadata along with the video content in a single request for an Android application?

While playing videos on Android 4.4+, it appears that multiple network requests are being made. In version 4.4, it seems that one of these requests is for metadata and stops around 2.5 megabytes. However, in 5.0.2, two full requests are fulfilled. Is ther ...

androidhtmlvideoandroid-5.0-lollipopandroid-4.4-kitkat

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

Having difficulty disassociating the radio button from the label

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;"> <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p> <img *ngIf="isImage[i]" [src]="a.image" ...

htmlcssangular

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

htmlcssangulartypescript

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

htmlcss

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

c#htmlimagebootstrap-4razor-pages

UI-Bootstrap selectively adds modal backdrop to specific elements

I have encountered a unique situation with my application where I am displaying a UI-Bootstrap modal inside a div, positioned above a navigation bar. Typically, when the modal is launched, a backdrop (dimmer) covers the entire background. Interestingly, my ...

cssangularjstwitter-bootstrap-3angular-ui-bootstrap

Ways to create a distinct highlight for the selected link in the navigation upon clicking

Similar Inquiry: How can I highlight a link based on the current page? Situation I have been struggling to keep a selected link in my navigation menu highlighted after it has been clicked. Unfortunately, I haven't come across any straightfor ...

phphtmlcssnavigation

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascriptcssreactjsmaterial-ui