Blurry oval box shadows in CSS are not visually appealing

I'm working on a school project that involves replicating a website. I'm trying to achieve a shadow effect under text in an oval shape, but so far my attempts have just resulted in a blurry rectangle.

Here is what I have currently: Click here

And here is the intended look: Click here

Below is the code I've been using, which creates the blurry rectangle:

box-shadow: 0 50px 20px -8px #000000;

Can anyone provide guidance on how to modify my current shadow effect to match the desired one in the second picture?

Thanks in advance,

htmlcss

Answer №1

To create a unique effect, I suggest using a pseudo-element and applying transformations like translate and rotate with the transform property. Additionally, adding a filter: blur can enhance the visual appeal of the element. It's important to consider compatibility issues when implementing these styles.

button {
  position: relative;
  margin: 2rem;
}

button::after {
  content: '';

  position: absolute;  
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform: translate(0, 200%) rotateX(70deg);
  
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(3px);
}
<button>Click me</button>

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

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

javascriptjqueryhtmlimage

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss

Designing in Ionic 3.x: Implementing Ion-Icon with a gradient backdrop (ion-chip)

Is there a way to add a gradient background to an icon? I attempted to nest the ion-icon within an ion-chip, like so: <ion-chip class="my-chip"> <ion-icon name="basket></ion-icon> </ion-chip Then, in the .css file: ...

htmlcsssassionic2ionic3

What is the best way to align a bootstrap 5 iframe in the center?

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500& ...

cssbootstrap-5

Google Chrome extension with Autofocus functionality

I developed a user-friendly Chrome extension that allows users to search using a simple form. Upon opening the extension, I noticed that there is no default focus on the form, requiring an additional click from the user. The intended behavior is for the ...

javascripthtmlgoogle-chromegoogle-chrome-extension

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...

cssangulartypescriptbootstrap-4mdbootstrap

Using DOMParser() eliminates whitespace

Basic code example: const parser = new DOMParser(); const foo = parser.parseFromString(<p> Foo</p>, 'text/html'); console.log(foo); This results in https://i.sstatic.net/8E2br.png Why have all the leading empty spaces before " ...

htmldom

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

Update the button functionality according to the button's unique identifier

I am trying to dynamically change the button's redirect link based on its ID in my NEXT.JS project, but as a newcomer to this framework, I am unsure of how to accomplish it. I understand that this modification should be done after rendering, possibly ...

javascripthtmldomswitch-statementnext.js

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

javascripthtmljsonangulartypescript

What is the most effective method for developing HTML with PHP or Jquery?

My JavaScript Object contains some important information that I need to display. I have two possible options for generating the HTML from this object. I am unsure which method is the most appropriate, or if it is simply a matter of personal preference. 1 ...

phpjqueryhtmlajax

Determining the browser width's pixel value to enhance responsiveness in design

Lately, I've been delving into the world of responsive design and trying to grasp the most effective strategies. From what I've gathered, focusing on content-driven breakpoints rather than device-specific ones is key. One thing that would greatl ...

javascripthtmlcssresponsive-design

Aligning Content in the Middle of a Bootstrap Column

Can anyone help me with centering the content of a bootstrap column vertically? I'm facing an issue when setting width: 100% and height: 100% for the overlay div. Any solutions? Here is an example image of what I am trying to achieve: https://i.ssta ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for positioning a 404 message at the center of a webpage

Struggling with centering a 404 error message on your Bootstrap 5 page without messing up the footer layout? When the viewport is small, the 404 message may end up getting covered by the footer. Feel free to check out the code snippet in full view to see ...

htmlcssresponsive-designfrontendbootstrap-5

Using Jquery .ajax to Populate Select Dropdown with JSON Data

I have put in a lot of effort but I'm not seeing any results. My JSON data, created with PHP, looks like this (with the header sent before the data): {"users":[ {"id":"3256","name":"Azad Kashmir"}, {"id":"3257","name":"Balochistan"}, {"id":"3258","na ...

javascriptjqueryhtmlajaxjson

To replace basic SVG icons upon clicking with the use of HTML, CSS, and jQuery - here's how!

I have a simple question about inline SVG icons and how to handle them in HTML, CSS, and jQuery. Despite reading numerous resources, I still struggle with implementing the functionality where clicking on one icon changes it to another. My objective: To to ...

jqueryhtmlcsssvgicons

The HTML table seems to be inexplicably replicating defaultValue values

I'm encountering an issue where, when I use JavaScript to add a new table data cell (td), it ends up copying the defaultValue and innerText of the previous td in the new cell. This is confusing to me because I am simply adding a new HTML element that ...

javascripthtmlreactjs

Extracting data from website tables

I've been attempting to retrieve salary information for CSU employees from a specific webpage (). Despite my efforts with the urllib2 and requests libraries, I have not been successful in extracting the table data from the webpage. My suspicion is tha ...

pythonhtmlweb-crawlerlxmlscrape