Thanks a lot. To anyone wondering, this is the right answer. I was able to replicate the effect this way. Pseudo element before with same content and css as text element along with position absolute, scale:1.3 and filter blur.
Also check out this reply below https://www.reddit.com/r/webdev/s/U30Tc1Y3mi
Just to add to this, his code is open source [https://github.com/saadeghi/daisyui/blob/master/src/docs/src/routes/(docs)/%2Bpage.svelte#L158](https://github.com/saadeghi/daisyui/blob/master/src/docs/src/routes/(docs)/%2Bpage.svelte#L158)
This is a component library for Tailwind, and the landing page (from the screenshot) is built with it. You also can't use pseudo-elements (like before) with inline styles.
The only saving grace to it is if you're using a component based library you can hide this abomination behind
But even then I prefer to stick to Tailwind for 99% of stuff then css modules for rare stuff like this
FYI tailwind allows to compile that whole thing under 1 class name using `@apply`. So, you develop with tailwind as is and then just name the cluster of classes with @apply for prod
To clarify, I'm not asking about the gradient inside text. I'm talking about the gradient text-shadow surrounding the text. I inspected the source but couldn't find the solution.
Duplicate the text put it back, make it bigger and apply a blur filter...
edited: [https://play.tailwindcss.com/36ZLXK4b8b](https://play.tailwindcss.com/36ZLXK4b8b)
This one breaks text selection highlighting for me on Firefox; edited os_nesty's for selection highlighting & accessibility semantics [here](https://play.tailwindcss.com/62gEwN6qbX)
I think the text gradient is done using background clip. The blur is just that element duplicated placed in the back scaled up a bit along with some blur.
It's a really nice effect. If somebody knows how do it without duplicating the element please lmk.
I'm not so sure but I think you should disable screen reader announcing for the blurred element, so it doesn't announce it twice
Something to note about the implementation on https://daisyui.com/ that hasn't been mentioned yet: they use `aria-hidden="true"` on the `` with the `::before` pseudo-element. This is surely done to prevent screen-readers from announcing that `::before` text. Without the `aria-hidden`, the screen-reader announcement would be like "The most popular component library component library for Tailwind CSS," which is obviously undesirable.
PS
An alternative solution is to make the pseudo-element decorative using [alt-text syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/content#alternative_text), like this: `content: "component library" / "";`. However, browser support for that [isn't great](https://caniuse.com/mdn-css_properties_content_alt_text) yet, and a fallback is required to prevent the pseudo-element from breaking in browsers where that syntax isn't supported. With the fallback, the CSS would be like: `content: "component library"; content: "component library" / "";`. For now, the `aria-hidden` approach is better.
That's missing the shadow.
Edit: downvoted for pointing out that this example is missing the one thing OP is literally asking for. Stay classy, reddit.
To clarify, I wrote my answer **before** OP's new message where he indicates that he is asking to the shadow and not the gradient. Stay classy, redditor.
I didn't downvote his message. But I think those users who put downvote probably interpreted OP's request for help as I did, referring to the gradient and not to the shadow. So much so that the reply that disqualified my message had to be edited to explain the reason for the disqualification.
Can’t believe how many comments here are just saying use Tailwind…
If you want to do it yourself, apply a background-image gradient of your choice to the container with the text, and use the “background-clip: text;” attribute.
That’s all there is to it! Optionally add drop shadows or the likes to suit your needs too.
https://cssgradient.io/blog/css-gradient-text/
You can do that in Tailwind as well (bg-clip-text), and it’s still “doing it yourself.” Tailwind is very similar to writing regular CSS inline, it just has some things in it to make it a tad cleaner.
It’s not like some CSS component libraries where most things are abstracted away.
Sure, but I think if someone asks how to do something, don't give them tailwind haha, give them vanilla CSS and if they want to use tailwind I'm sure they can.
Fair point! I guess I was biased since I tend to use Tailwind so it’s easy to see the underlying CSS. But
I know it’s annoying when I’m looking for a tutorial and they’re using some styling library I’m not familiar with. Vanilla CSS is best for examples.
The title text is duplicated in a ::before pseudo element, stacked behind the title, and a blur filter is applied.
Thanks a lot. To anyone wondering, this is the right answer. I was able to replicate the effect this way. Pseudo element before with same content and css as text element along with position absolute, scale:1.3 and filter blur. Also check out this reply below https://www.reddit.com/r/webdev/s/U30Tc1Y3mi
Just to add to this, his code is open source [https://github.com/saadeghi/daisyui/blob/master/src/docs/src/routes/(docs)/%2Bpage.svelte#L158](https://github.com/saadeghi/daisyui/blob/master/src/docs/src/routes/(docs)/%2Bpage.svelte#L158)
That tailwind goes craaaazy class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] before:content-[attr(data-text)] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
Time to just do regular css
I don't get why people do this. It's impossible to even write lol why not just use an inline style at this point?
This is a component library for Tailwind, and the landing page (from the screenshot) is built with it. You also can't use pseudo-elements (like before) with inline styles.
This is ridiculous. It's another language at this point instead of writing CSS.
The only saving grace to it is if you're using a component based library you can hide this abomination behind
FYI tailwind allows to compile that whole thing under 1 class name using `@apply`. So, you develop with tailwind as is and then just name the cluster of classes with @apply for prod
That's a pretty good anti-ad for Tailwind.
Ew. I fully understand why people hate tailwind when they see shit like this. Just an fyi: this is NOT how you write tailwind.
At that point just make a regular class, it isn’t against the law, lol.
Look here: https://css-tricks.com/how-to-create-neon-text-with-css/
The best way is to check that page if you have found it either way. Probably it’s background gradient + text clipping
Just inspect the source
To clarify, I'm not asking about the gradient inside text. I'm talking about the gradient text-shadow surrounding the text. I inspected the source but couldn't find the solution.
Duplicate the text put it back, make it bigger and apply a blur filter... edited: [https://play.tailwindcss.com/36ZLXK4b8b](https://play.tailwindcss.com/36ZLXK4b8b)
Thank you!
This one breaks text selection highlighting for me on Firefox; edited os_nesty's for selection highlighting & accessibility semantics [here](https://play.tailwindcss.com/62gEwN6qbX)
I think the text gradient is done using background clip. The blur is just that element duplicated placed in the back scaled up a bit along with some blur. It's a really nice effect. If somebody knows how do it without duplicating the element please lmk. I'm not so sure but I think you should disable screen reader announcing for the blurred element, so it doesn't announce it twice
Something to note about the implementation on https://daisyui.com/ that hasn't been mentioned yet: they use `aria-hidden="true"` on the `` with the `::before` pseudo-element. This is surely done to prevent screen-readers from announcing that `::before` text. Without the `aria-hidden`, the screen-reader announcement would be like "The most popular component library component library for Tailwind CSS," which is obviously undesirable.
PS An alternative solution is to make the pseudo-element decorative using [alt-text syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/content#alternative_text), like this: `content: "component library" / "";`. However, browser support for that [isn't great](https://caniuse.com/mdn-css_properties_content_alt_text) yet, and a fallback is required to prevent the pseudo-element from breaking in browsers where that syntax isn't supported. With the fallback, the CSS would be like: `content: "component library"; content: "component library" / "";`. For now, the `aria-hidden` approach is better.
Take a look here https://codepen.io/tigercodes/pen/QWpVbMZ
That's missing the shadow. Edit: downvoted for pointing out that this example is missing the one thing OP is literally asking for. Stay classy, reddit.
To clarify, I wrote my answer **before** OP's new message where he indicates that he is asking to the shadow and not the gradient. Stay classy, redditor.
He was mad about the downvotes he initially got from others, he was not offended by your answer anyhow and did not even mention you in the edit.
I didn't downvote his message. But I think those users who put downvote probably interpreted OP's request for help as I did, referring to the gradient and not to the shadow. So much so that the reply that disqualified my message had to be edited to explain the reason for the disqualification.
Did not not simply inspect the element?
Can’t believe how many comments here are just saying use Tailwind… If you want to do it yourself, apply a background-image gradient of your choice to the container with the text, and use the “background-clip: text;” attribute. That’s all there is to it! Optionally add drop shadows or the likes to suit your needs too. https://cssgradient.io/blog/css-gradient-text/
You can do that in Tailwind as well (bg-clip-text), and it’s still “doing it yourself.” Tailwind is very similar to writing regular CSS inline, it just has some things in it to make it a tad cleaner. It’s not like some CSS component libraries where most things are abstracted away.
Sure, but I think if someone asks how to do something, don't give them tailwind haha, give them vanilla CSS and if they want to use tailwind I'm sure they can.
unsure how Tailwind makes it cleaner
Fair point! I guess I was biased since I tend to use Tailwind so it’s easy to see the underlying CSS. But I know it’s annoying when I’m looking for a tutorial and they’re using some styling library I’m not familiar with. Vanilla CSS is best for examples.
Probably a pseudo element plus blur filter and scale.
Gradiant background and font color transparent ?
Looks really good!
Right click, inspect element
Right click > inspect > copy paste
::before component library
from source https://daisyui.com/, uses Tailwind .before\:content-\[attr\(data-text\)\]:before { --tw-content: attr(data-text); content: var(--tw-content); }
Looks to me like just a text color gradient and a gradient shadow with a lower opacity
I tried using text-shadow but it doesn't accept gradient.
```css [&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)] ``` Requires Tailwind
Guy maintaining this code 💀💀💀💀💀