コピペで使えるCSS 便利サイト 20250128

## 1. はじめに
大学生エンジニアの私が勉強中、コーディング中に見つけた便利なサイトを紹介します:blush:
見づらい部分があるかと思いますが、皆さんのご参考になれば幸いです。
随時追加していきます。

　
## 2. 便利サイト

コピペで反映できるサイトを紹介します。

### 2-1. Neumorphism.io

僕が好きなニューモーフィズムなデザインが簡単に作れるので、とてもおすすめです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/c948ed84-0422-e6c0-e384-29513f6a3a92.png)


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PwYXjqE" data-pen-title="ニューモーフィズム" data-user="opcivmrc-the-bashful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opcivmrc-the-bashful/pen/PwYXjqE">
  ニューモーフィズム</a> by まんまねこ (<a href="https://codepen.io/opcivmrc-the-bashful">@opcivmrc-the-bashful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

https://neumorphism.io/#e0e0e0

### 2-2. CSS Box Shadows Generator

ニューモーフィズムに続いてBox Shadow生成です。なかなかおしゃれですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/28a60cd7-5ef9-9ee3-5c26-244671e8879c.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="EaYGXwK" data-pen-title="Untitled" data-user="opcivmrc-the-bashful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opcivmrc-the-bashful/pen/EaYGXwK">
  Untitled</a> by まんまねこ (<a href="https://codepen.io/opcivmrc-the-bashful">@opcivmrc-the-bashful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

https://boxshadows.arbaouimehdi.dev/

### 2-3. CSS Gradient

なかなかグラデーション作るのめんどくさかったりします。そんなときはこのサイトですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/efe3a817-6c4b-5ac0-9535-8252f50efbea.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ByBvZRP" data-pen-title="CSS Gradient" data-user="opcivmrc-the-bashful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opcivmrc-the-bashful/pen/ByBvZRP">
  CSS Gradient</a> by まんまねこ (<a href="https://codepen.io/opcivmrc-the-bashful">@opcivmrc-the-bashful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

https://cssgradient.io/

### 2-4. Gradient Magic

たくさんの背景素材が詰まったギャラリー、色も調節できます。現在1731個で一部課金性のようです。
無料でも多くの背景が使用できるので、おすすめです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/a145ee66-a833-c759-a923-4b5ca482a1ea.png)


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="raBoQpa" data-pen-title="Untitled" data-user="opcivmrc-the-bashful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opcivmrc-the-bashful/pen/raBoQpa">
  Untitled</a> by まんまねこ (<a href="https://codepen.io/opcivmrc-the-bashful">@opcivmrc-the-bashful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


https://www.gradientmagic.com/collection/gingham/gradient/1575939434534


### 2-5. Min-Max-Value Interpolation

メディアクエリをできるだけ減らして可読性高く記述する際clamp関数の計算をしてくれるこのサイトはとても便利。clamp(最小値,推奨値,最大値)という感じで計算される。詳しくは調べてね。
clamp(0.5rem, 0.185rem + 1.57vw, 1.563rem)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/feaad7dc-06c9-32ca-e8f8-a388ff495dec.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MYgZbML" data-pen-title="Untitled" data-user="opcivmrc-the-bashful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opcivmrc-the-bashful/pen/MYgZbML">
  Untitled</a> by まんまねこ (<a href="https://codepen.io/opcivmrc-the-bashful">@opcivmrc-the-bashful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

https://min-max-calculator.9elements.com/


### 2-6. CSSからTailwindCSSへのコンバータ

css→tailwindに書き換えてくれるサイトです。
最近tailwindを使い初めて、リファクタでcssをtailwindに書き直す機会がありましたが、結構単調な作業なので、このサイトはとても重宝しました。正しく変えてくれないものも結構あります。



https://divmagic.com/ja/tools/css-to-tailwind

### 2-7. uiverse

僕の一押しです。おしゃれなUI達がたくさん投稿されていて、とても参考になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756917/fd7e0f8d-28b4-51af-a2a9-b9bc8074d410.png)


https://uiverse.io/

## 3. 最後に

僕が普段使っているウェブサイトを紹介しました！
コピペでできるのは便利ですが、中身を理解して使うようにしないとですね。