Skip to content

Instantly share code, notes, and snippets.

@dpaluy

dpaluy/conic.css.html

Last active March 8, 2021 15:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dpaluy/27dc4bcde8cd1250c477aea0439dca73 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dpaluy/27dc4bcde8cd1250c477aea0439dca73 to your computer and use it in GitHub Desktop.
Download ZIP
conic.css in Tailwind
Raw
conic.css.html
<div class="bg-gray-600 p-20 h-screen">
<div class="grid grid-cols-2 gap-12 place-items-center">
<div class="rounded-lg border-8 border-white h-48 w-48 shadow-lg">
<div class="h-full w-full bg-gradient-conic-tr from-green-200 via-blue-100 to-green-600"></div>
</div>
<div class="rounded-lg border-8 border-white h-48 w-48 shadow-lg">
<div class="h-full w-full bg-gradient-conic-tl from-pink-500 via-purple-500 to-blue-500"></div>
</div>
<div class="rounded-lg border-8 border-white h-48 w-48 shadow-lg">
<div class="h-full w-full bg-gradient-conic-br from-orange-200 via-yellow-500 to-red-500"></div>
</div>
<div class="rounded-lg border-8 border-white h-48 w-48 shadow-lg">
<div class="h-full w-full bg-gradient-conic-bl from-yellow-400 via-red-500 to-pink-500"></div>
</div>
</div>
</div>
Raw
tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'gradient-conic-tr': 'conic-gradient(at top right, var(--gradient-color-stops))',
'gradient-conic-tl': 'conic-gradient(at top left, var(--gradient-color-stops))',
'gradient-conic-br': 'conic-gradient(at bottom right, var(--gradient-color-stops))',
'gradient-conic-bl': 'conic-gradient(at bottom left, var(--gradient-color-stops))',
}
}
}
}
@dpaluy
Copy link
Author

dpaluy commented Mar 8, 2021

Source: https://play.tailwindcss.com/01JiGvYvn0?size=540x720

Conic.css https://conic.style/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment