DEV Community

Soft Heart Engineer
Soft Heart Engineer

Posted on

6

Backlight in CSS

Check out this Pen I made!

Top comments (4)

Collapse
 
yaireo profile image
Yair Even Or

you should inherit the border-radius also.
please never user width: 100%; height: 100%; like this, but instead use inset: 0

Collapse
 
softheartengineer profile image
Soft Heart Engineer

Hi @yaireo, Thanks for the suggestions. pen is updated now.

Collapse
 
petecapecod profile image
Peter Cruckshank

Wow nice great effect!

Collapse
 
kartofelek007 profile image
kartofelek007

Add isolation: isolate to .container. z-index: -1 will cause the blur to be at the bottom of the layers. You don't want this

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay