René's URL Explorer Experiment


Title: Shadows  |  web.dev

Open Graph Title: Shadows  |  web.dev

Description: There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for.

Open Graph Description: There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for.

Opengraph URL: https://web.dev/learn/css/shadows

X: @ChromiumDev

direct link

Domain: web.dev

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:imagehttps://web.dev/static/images/social-wide.jpg
og:image:width1200
og:image:height675
og:localeen
twitter:cardsummary
twitter:imagehttps://web.dev/static/images/social-wide.jpg

Links:

Skip to main content https://web.dev/learn/css/shadows#main-content
https://web.dev/
Resources https://web.dev/learn
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
https://web.dev/
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Welcome to Learn CSS!https://web.dev/learn/css/welcome
Box Modelhttps://web.dev/learn/css/box-model
Selectorshttps://web.dev/learn/css/selectors
Nestinghttps://web.dev/learn/css/nesting
The cascadehttps://web.dev/learn/css/the-cascade
Specificityhttps://web.dev/learn/css/specificity
Inheritancehttps://web.dev/learn/css/inheritance
Colorhttps://web.dev/learn/css/color
Sizing Unitshttps://web.dev/learn/css/sizing
Layouthttps://web.dev/learn/css/layout
Flexboxhttps://web.dev/learn/css/flexbox
Gridhttps://web.dev/learn/css/grid
Logical Propertieshttps://web.dev/learn/css/logical-properties
Custom Propertieshttps://web.dev/learn/css/custom-properties
Spacinghttps://web.dev/learn/css/spacing
Pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Pseudo-classeshttps://web.dev/learn/css/pseudo-classes
Bordershttps://web.dev/learn/css/borders
Shadowshttps://web.dev/learn/css/shadows
Focushttps://web.dev/learn/css/focus
Cursors and pointershttps://web.dev/learn/css/cursors-and-pointers
Z-index and stacking contextshttps://web.dev/learn/css/z-index
Anchor positioninghttps://web.dev/learn/css/anchor-positioning
Popover and dialoghttps://web.dev/learn/css/popover-and-dialog
Functionshttps://web.dev/learn/css/functions
Paths, shapes, clipping, and maskinghttps://web.dev/learn/css/paths-shapes-clipping-masking
Gradientshttps://web.dev/learn/css/gradients
Animationshttps://web.dev/learn/css/animations
Filtershttps://web.dev/learn/css/filters
Blend Modeshttps://web.dev/learn/css/blend-modes
Listshttps://web.dev/learn/css/lists
Countershttps://web.dev/learn/css/counters
Transitionshttps://web.dev/learn/css/transitions
View Transitions for SPAshttps://web.dev/learn/css/view-transitions-spas
Overflowhttps://web.dev/learn/css/overflow
Backgroundshttps://web.dev/learn/css/backgrounds
Text and typographyhttps://web.dev/learn/css/typography
Container querieshttps://web.dev/learn/css/container-queries
Conclusion and next stepshttps://web.dev/learn/css/conclusion
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
web.dev https://web.dev/
Resources https://web.dev/learn
CSS https://web.dev/learn/css
The CSS Podcast - 017: Shadows https://thecsspodcast.libsyn.com/017-shadows
box-shadowhttps://developer.mozilla.org/docs/Web/CSS/box-shadow
text-shadowhttps://developer.mozilla.org/docs/Web/CSS/text-shadow
drop-shadow()https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow()
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/box-shadow
Any valid color valuehttps://web.dev/learn/css/color
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-shadow
filtershttps://web.dev/learn/css/filters
Previous arrow_back Borders https://web.dev/learn/css/borders
Next Focus arrow_forward https://web.dev/learn/css/focus
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/learn/css/shadows

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.